@nayhoo/ui 0.13.0 → 0.14.1

package/README.md

@@ -32,6 +32,23 @@ const nextConfig: NextConfig = {
 export default withVanillaExtract(nextConfig);
 ```
 
+```tsx
+// src/app/provider.tsx
+
+"use client";
+
+import { ThemeProvider } from "@nayhoo/ui/providers";
+import React from "react";
+
+type AppProviderProps = {
+  children: React.ReactNode;
+};
+
+export const AppProvider = ({ children }: AppProviderProps) => {
+  return <ThemeProvider>{children}</ThemeProvider>;
+};
+```
+
 ```tsx
 // src/app/layout.tsx
 
@@ -61,20 +78,15 @@ export default function RootLayout({
 ```
 
 ```tsx
-// src/app/provider.tsx
+// src/app/page.tsx
 
 "use client";
 
-import { ThemeProvider } from "@nayhoo/ui/providers";
-import React from "react";
-
-type AppProviderProps = {
-  children: React.ReactNode;
-};
+import { Button } from "@nayhoo/ui/button";
 
-export const AppProvider = ({ children }: AppProviderProps) => {
-  return <ThemeProvider>{children}</ThemeProvider>;
-};
+export default function Home() {
+  return <Button />;
+}
 ```
 
 ### Vite
@@ -93,9 +105,6 @@ import { defineConfig } from "vite";
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react(), vanillaExtractPlugin()],
-  optimizeDeps: {
-    include: ["@nayhoo/ui"],
-  },
 });
 ```
 
@@ -105,8 +114,8 @@ export default defineConfig({
 import "@nayhoo/ui/theme/index.css"; // REQUIRED
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import "./index.css";
 import App from "./App.tsx";
+import "./index.css";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
@@ -116,23 +125,18 @@ createRoot(document.getElementById("root")!).render(
 ```
 
 ```tsx
-// src/app.tsx
+// src/App.tsx
 
+import { Button } from "@nayhoo/ui/button";
 import { ThemeProvider } from "@nayhoo/ui/providers";
 
-function App({ children }: { children: React.ReactNode }) {
-  return <ThemeProvider>{children}</ThemeProvider>;
+function App() {
+  return (
+    <ThemeProvider>
+      <Button onClick={() => alert("Hello!")}>Press me</Button>
+    </ThemeProvider>
+  );
 }
-```
-
-## Usage
-
-```tsx
-"use client";
 
-import { Button } from "@nayhoo/ui/button";
-
-export const Component = () => {
-  return <Button onClick={() => alert("Hello!")}>Press me</Button>;
-};
+export default App;
 ```

package/dist/{avatar.css-Lh26jRUS.d.mts → avatar.css-C22jQqLD.d.mts}

@@ -4,33 +4,33 @@ import { RecipeVariants } from '@vanilla-extract/recipes';
 declare const avatarRecipe: _vanilla_extract_recipes.RuntimeFn<{
     size: {
         "1": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            width: `var(--${string})` | `var(--${string}, ${string})`;
         };
         "2": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            width: `var(--${string})` | `var(--${string}, ${string})`;
         };
         "3": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            width: `var(--${string})` | `var(--${string}, ${string})`;
         };
         "4": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            width: `var(--${string})` | `var(--${string}, ${string})`;
         };
         "5": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            width: `var(--${string})` | `var(--${string}, ${string})`;
         };
         "6": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            width: `var(--${string})` | `var(--${string}, ${string})`;
         };
     };
     shape: {
         square: {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
         };
         circle: {
             borderRadius: "50%";
@@ -75,19 +75,19 @@ declare const avatarFallbackRecipe: _vanilla_extract_recipes.RuntimeFn<{
             lineHeight: "15px";
         };
         "2": {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
         };
         "3": {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
         };
         "4": {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
         };
         "5": {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
         };
         "6": {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
         };
     };
 }>;

package/dist/{avatar.css-Lh26jRUS.d.ts → avatar.css-C22jQqLD.d.ts}

@@ -4,33 +4,33 @@ import { RecipeVariants } from '@vanilla-extract/recipes';
 declare const avatarRecipe: _vanilla_extract_recipes.RuntimeFn<{
     size: {
         "1": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            width: `var(--${string})` | `var(--${string}, ${string})`;
         };
         "2": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            width: `var(--${string})` | `var(--${string}, ${string})`;
         };
         "3": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            width: `var(--${string})` | `var(--${string}, ${string})`;
         };
         "4": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            width: `var(--${string})` | `var(--${string}, ${string})`;
         };
         "5": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            width: `var(--${string})` | `var(--${string}, ${string})`;
         };
         "6": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            width: `var(--${string})` | `var(--${string}, ${string})`;
         };
     };
     shape: {
         square: {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
         };
         circle: {
             borderRadius: "50%";
@@ -75,19 +75,19 @@ declare const avatarFallbackRecipe: _vanilla_extract_recipes.RuntimeFn<{
             lineHeight: "15px";
         };
         "2": {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
         };
         "3": {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
         };
         "4": {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
         };
         "5": {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
         };
         "6": {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
         };
     };
 }>;

package/dist/{badge.css-ToNvOJof.d.mts → badge.css-saeodjWf.d.mts}

@@ -4,30 +4,30 @@ import { RecipeVariants } from '@vanilla-extract/recipes';
 declare const badgeRecipe: _vanilla_extract_recipes.RuntimeFn<{
     color: {
         primary: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
         };
         secondary: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
         };
         error: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
         };
     };
     size: {
         "1": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
         };
         "2": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
         };
     };
 }>;

package/dist/{badge.css-ToNvOJof.d.ts → badge.css-saeodjWf.d.ts}

@@ -4,30 +4,30 @@ import { RecipeVariants } from '@vanilla-extract/recipes';
 declare const badgeRecipe: _vanilla_extract_recipes.RuntimeFn<{
     color: {
         primary: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
         };
         secondary: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
         };
         error: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
         };
     };
     size: {
         "1": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
         };
         "2": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
         };
     };
 }>;

package/dist/{button.css-CxDH431y.d.mts → button.css-BQdFVzyM.d.mts}

@@ -6,6 +6,9 @@ declare const buttonRecipe: homemade_recipes.RuntimeFn<{
         true: {
             width: "100%";
         };
+        false: {
+            width: "unset";
+        };
     };
     loading: {
         true: {
@@ -14,64 +17,64 @@ declare const buttonRecipe: homemade_recipes.RuntimeFn<{
     };
     size: {
         "1": {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
         };
         "2": {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
         };
         "3": {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
+            height: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
+            paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
         };
     };
     variant: {
         primary: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
             selectors: {
                 "&:hover": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                 };
                 "&:active": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                 };
             };
         };
         secondary: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
             selectors: {
                 "&:hover": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                 };
                 "&:active": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                 };
             };
         };
         outline: {
             backgroundColor: "transparent";
-            boxShadow: `inset 0 0 0 1px var(--${string})` | `inset 0 0 0 1px var(--${string}, ${string})` | `inset 0 0 0 1px var(--${string}, ${number})`;
+            boxShadow: `inset 0 0 0 1px var(--${string})` | `inset 0 0 0 1px var(--${string}, ${string})`;
             selectors: {
                 "&:hover": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                 };
                 "&:active": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                 };
             };
         };
@@ -79,41 +82,41 @@ declare const buttonRecipe: homemade_recipes.RuntimeFn<{
             backgroundColor: "transparent";
             selectors: {
                 "&:hover": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                 };
                 "&:active": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                 };
             };
         };
         error: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
             selectors: {
                 "&:hover": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                 };
                 "&:active": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                 };
             };
         };
         success: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
             selectors: {
                 "&:hover": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                 };
                 "&:active": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
                 };
             };
         };
     };
     round: {
         true: {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
         };
     };
 }, "sm"[]>;