Merge pull request #35 from inkonchain/feat/rename-rounded

feat: rename rounded to generic names

src/components/Button/InternalButton.tsx

@@ -32,7 +32,7 @@ export const InternalButton = <
           wallet:
             "ink:bg-background-light-transparent ink:px-1.5 ink:py-2 ink:text-body-2 ink:font-bold ink:text-text-default ink:hover:bg-background-light ink:disabled:bg-background-light-transparent-disabled ink:disabled:text-muted ink:active:bg-background-light",
           "wallet-inside":
-            "ink:bg-background-light-invisible ink:px-1.5 ink:rounded-8 ink:text-body-2 ink:font-bold ink:text-text-default ink:hover:bg-background-container ink:disabled:bg-background-light-transparent-disabled ink:disabled:text-muted ink:active:bg-background-light",
+            "ink:bg-background-light-invisible ink:px-1.5 ink:rounded-xs ink:text-body-2 ink:font-bold ink:text-text-default ink:hover:bg-background-container ink:disabled:bg-background-light-transparent-disabled ink:disabled:text-muted ink:active:bg-background-light",
         }),
         className
       )}

src/components/Input/Input.tsx

@@ -12,7 +12,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       <input
         ref={ref}
         className={classNames(
-          "ink:w-full ink:font-default ink:rounded-8 ink:bg-background-container ink:p-2 ink:text-body-2 ink:text-text-default",
+          "ink:w-full ink:font-default ink:rounded-xs ink:bg-background-container ink:p-2 ink:text-body-2 ink:text-text-default",
           "focus:ink:outline focus:ink:outline-1 ink:outline-text-on-secondary",
           className
         )}

src/components/Modal/Modal.tsx

@@ -73,7 +73,7 @@ export const Modal = <TOnCloseProps,>({
             transition
             className={classNames(
               "ink:flex ink:flex-col ink:justify-between ink:gap-3 ink:p-3",
-              "ink:bg-background-light ink:shadow-modal ink:rounded-24",
+              "ink:bg-background-light ink:shadow-modal ink:rounded-lg",
               "ink:duration-200 ink:ease-out ink:data-closed:scale-95 ink:data-closed:opacity-0",
               variantClassNames(size, {
                 lg: "ink:min-w-[320px] ink:sm:min-w-[640px] ink:min-h-[480px] ink:max-w-4xl",

src/components/Wallet/ConnectWallet.tsx

@@ -38,7 +38,7 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({ className }) => {
       <PopoverPanel
         className={classNames(
           "ink:absolute ink:z-10 ink:min-w-[240px]",
-          "ink:rounded-24 ink:rounded-lg ink:bg-background-light ink:p-1.5 ink:shadow-menu",
+          "ink:rounded-lg ink:bg-background-light ink:p-1.5 ink:shadow-menu",
           "ink:flex ink:flex-col ink:gap-2"
         )}
         anchor={{ to: "bottom end", gap: 8 }}
@@ -77,7 +77,7 @@ const ConnectedWalletSection = ({ address }: { address: Address }) => {
   return (
     <>
       {(isLoading || isSuccess) && (
-        <div className="ink:text-body-2 ink:font-medium ink:p-1.5 ink:bg-background-container ink:rounded-16 ink:flex ink:gap-1.5 ink:font-default">
+        <div className="ink:text-body-2 ink:font-medium ink:p-1.5 ink:bg-background-container ink:rounded-md ink:flex ink:gap-1.5 ink:font-default">
           <div className="ink:flex ink:flex-col ink:flex-1">
             <div className="ink:text-text-muted ink:text-caption ink:font-bold">
               Balance

src/layout/InkLayout/InkLayout.tsx

@@ -37,7 +37,7 @@ export const InkLayout: React.FC<InkLayoutProps> = ({
             {sideNavigation}
           </div>
         )}
-        <div className="ink:flex-1 ink:bg-background-light ink:rounded-24 ink:shadow-layout ink:p-3 ink:mr-5">
+        <div className="ink:flex-1 ink:bg-background-light ink:rounded-lg ink:shadow-layout ink:p-3 ink:mr-5">
           {children}
         </div>
       </div>

src/layout/InkLayout/InkNavLink.tsx

@@ -35,7 +35,7 @@ export const InkNavLink = <
       href={href}
       className={classNames(
         Component === DEFAULT_COMPONENT_TYPE &&
-          "ink:flex ink:items-center ink:gap-1.5 ink:px-1.5 ink:py-1.5 ink:text-inherit ink:no-underline ink:rounded-16 ink:transition-colors ink:duration-200 ink:hover:bg-background-container",
+          "ink:flex ink:items-center ink:gap-1.5 ink:px-1.5 ink:py-1.5 ink:text-inherit ink:no-underline ink:rounded-md ink:transition-colors ink:duration-200 ink:hover:bg-background-container",
         className
       )}
       {...asProps}

src/tailwind.css

@@ -50,9 +50,11 @@
 
 @theme {
   /* Fonts */
+  --font-*: initial;
   --font-default: "Plus Jakarta Sans";
 
   /* Colors */
+  --color-*: initial;
   --color-background-dark: var(--ink-background-dark);
   --color-background-dark-transparent: var(--ink-background-dark-transparent);
   --color-background-container: var(--ink-background-container);
@@ -84,6 +86,7 @@
   --color-default-app-icon-gradient: var(--ink-default-app-icon-gradient);
 
   /* Typography */
+  --text-*: initial;
   --text-h1: 72px;
   --text-h1--line-height: 72px;
 
@@ -128,12 +131,15 @@
   --spacing-16: 128px;
 
   /* Radius */
+  --radius-*: initial;
   --radius-full: 9999px;
-  --radius-24: 24px;
-  --radius-16: 16px;
-  --radius-8: 8px;
+  --radius-lg: 24px;
+  --radius-md: 16px;
+  --radius-sm: 12px;
+  --radius-xs: 8px;
 
   /* Shadows */
+  --shadow-*: initial;
   --shadow-menu: 0px 8px 24px -8px #160f1f1a;
   --shadow-modal: 0px 16px 64px -32px #160f1f1a;
   --shadow-layout: 0px 16px 64px -32px #160f1f0d;

src/util/classes.ts

@@ -31,7 +31,13 @@ const colors = [
 const customTwMerge = extendTailwindMerge({
   override: {
     classGroups: {
-      rounded: ["rounded-8", "rounded-16", "rounded-24", "rounded-full"],
+      rounded: [
+        "rounded-xs",
+        "rounded-sm",
+        "rounded-md",
+        "rounded-lg",
+        "rounded-full",
+      ],
       "font-size": [
         "text-h1",
         "text-h2",