From cd3d07f4384b44e8c965d9bd5bccc1e80cdbb478 Mon Sep 17 00:00:00 2001
From: prsvic <prsvic@gmail.com>
Date: Mon, 2 Dec 2024 15:18:59 +0400
Subject: [PATCH] chore/add spacing tokens (#45)

* add spacing tokens

* fix text area overflow

* upd padding token;
fix input height;
fix caption margin
---
 packages/blinks/src/index.css                 | 25 +++++++++++++++++--
 packages/blinks/src/ui/internal/Button.tsx    |  2 +-
 .../src/ui/internal/inputs/ActionTextArea.tsx |  1 +
 .../ui/internal/inputs/BaseInputContainer.tsx |  3 ++-
 .../blinks/src/ui/layouts/BaseBlinkLayout.tsx | 22 ++++++++--------
 packages/blinks/tailwind.config.js            |  7 ++++++
 6 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/packages/blinks/src/index.css b/packages/blinks/src/index.css
index e81e9db2..0258a19e 100644
--- a/packages/blinks/src/index.css
+++ b/packages/blinks/src/index.css
@@ -69,6 +69,12 @@
     --blink-border-radius-rounded-input: 0.5rem;
     --blink-border-radius-rounded-input-standalone: 0.5rem;
 
+    --blink-spacing-padding: 1.25rem;
+    --blink-spacing-gap: 1rem;
+    --blink-spacing-btwn-buttons: 0.5rem;
+    --blink-spacing-btwn-inputs: 0.75rem;
+    --blink-spacing-input-height: 40px;
+
     --blink-shadow-container: 0px 129.333px 103.467px 0px rgba(0, 0, 0, 0.07), 0px 54.032px 43.226px 0px rgba(0, 0, 0, 0.05), 0px 16.195px 12.956px 0px rgba(0, 0, 0, 0.04), 0px 8.601px 6.881px 0px rgba(0, 0, 0, 0.03), 0px 3.579px 2.863px 0px rgba(0, 0, 0, 0.02);
   }
 
@@ -79,6 +85,13 @@
     --blink-border-radius-rounded-button: 624.9375rem;
     --blink-border-radius-rounded-input: 1.25rem;
     --blink-border-radius-rounded-input-standalone: 1.75rem;
+
+    --blink-spacing-padding: 1.25rem;
+    --blink-spacing-gap: 1rem;
+    --blink-spacing-btwn-buttons: 0.5rem;
+    --blink-spacing-btwn-inputs: 0.75rem;
+    --blink-spacing-input-height: 40px;
+
   }
 
   .x-dark {
@@ -177,5 +190,13 @@
     --blink-shadow-container: 0px 2px 8px 0px rgba(62, 177, 255, 0.22), 0px 1px 48px 0px rgba(62, 177, 255, 0.24);
   }
 
-  .custom {}
-}
\ No newline at end of file
+  .custom {
+
+    /* this will be removed in future versions */
+    --blink-spacing-padding: 1.25rem;
+    --blink-spacing-gap: 1rem;
+    --blink-spacing-btwn-buttons: 0.5rem;
+    --blink-spacing-btwn-inputs: 0.75rem;
+    --blink-spacing-input-height: 40px;
+  }
+}
diff --git a/packages/blinks/src/ui/internal/Button.tsx b/packages/blinks/src/ui/internal/Button.tsx
index d00c2b71..44309990 100644
--- a/packages/blinks/src/ui/internal/Button.tsx
+++ b/packages/blinks/src/ui/internal/Button.tsx
@@ -18,7 +18,7 @@ export const Button = ({
   return (
     <button
       className={clsx(
-        'rounded-button text-text relative flex w-full items-center justify-center text-nowrap px-4 py-3 font-semibold transition-colors motion-reduce:transition-none',
+        'rounded-button text-text h-input-height relative flex w-full items-center justify-center text-nowrap px-4 py-3 font-semibold transition-colors motion-reduce:transition-none',
         {
           'px-5': isLink,
           'bg-button-disabled text-text-button-disabled':
diff --git a/packages/blinks/src/ui/internal/inputs/ActionTextArea.tsx b/packages/blinks/src/ui/internal/inputs/ActionTextArea.tsx
index b2aaf451..39bc390d 100644
--- a/packages/blinks/src/ui/internal/inputs/ActionTextArea.tsx
+++ b/packages/blinks/src/ui/internal/inputs/ActionTextArea.tsx
@@ -72,6 +72,7 @@ export const ActionTextArea = ({
       }
     >
       <textarea
+        className="my-1.5 whitespace-normal"
         placeholder={placeholderWithRequired}
         value={value}
         onChange={extendedChange}
diff --git a/packages/blinks/src/ui/internal/inputs/BaseInputContainer.tsx b/packages/blinks/src/ui/internal/inputs/BaseInputContainer.tsx
index 592e6571..ecc85d12 100644
--- a/packages/blinks/src/ui/internal/inputs/BaseInputContainer.tsx
+++ b/packages/blinks/src/ui/internal/inputs/BaseInputContainer.tsx
@@ -34,11 +34,12 @@ export const BaseInputContainer = ({
     <div>
       <div
         className={clsx(
-          'border-input-stroke peer relative flex min-h-10 flex-wrap items-center gap-1.5 gap-y-2 border p-1.5 transition-colors motion-reduce:transition-none',
+          'border-input-stroke min-h-input-height peer relative box-border flex flex-wrap items-center gap-1.5 gap-y-2 border px-1.5 transition-colors motion-reduce:transition-none',
           // focus, invalid, required
           'focus-within:has-[:invalid]:border-input-stroke-error focus-within:has-[:valid]:border-input-stroke-selected focus-within:hover:has-[:invalid]:border-input-stroke-error focus-within:hover:has-[:valid]:border-input-stroke-selected',
           // enabled,
           'hover:has-[:enabled]:border-input-stroke-hover',
+          { 'py-1.5': !!rightAdornment },
           standalone ? 'rounded-input-standalone' : 'rounded-input',
         )}
       >
diff --git a/packages/blinks/src/ui/layouts/BaseBlinkLayout.tsx b/packages/blinks/src/ui/layouts/BaseBlinkLayout.tsx
index 159ee9f3..42bcab7c 100644
--- a/packages/blinks/src/ui/layouts/BaseBlinkLayout.tsx
+++ b/packages/blinks/src/ui/layouts/BaseBlinkLayout.tsx
@@ -206,7 +206,7 @@ export const BaseBlinkLayout = ({
         {image && (
           <Linkable
             url={websiteUrl}
-            className="block max-h-[100cqw] overflow-y-hidden px-5 pt-5"
+            className="px-padding pt-padding block max-h-[100cqw] overflow-y-hidden"
           >
             <img
               className={clsx(
@@ -217,8 +217,8 @@ export const BaseBlinkLayout = ({
             />
           </Linkable>
         )}
-        <div className="flex flex-col p-5">
-          <div className="mb-1 flex items-center gap-2">
+        <div className="px-padding pb-padding pt-gap flex flex-col">
+          <div className="mb-1.5 flex items-center gap-2">
             {websiteUrl && (
               <a
                 href={websiteUrl}
@@ -265,10 +265,10 @@ export const BaseBlinkLayout = ({
               )}
             </a>
           </div>
-          <span className="text-text text-text-primary mb-1.5 break-words font-semibold">
+          <span className="text-text text-text-primary mb-1 break-words font-semibold">
             {title}
           </span>
-          <span className="text-subtext text-text-secondary mb-4 break-words">
+          <span className="text-subtext text-text-secondary mb-gap break-words">
             {description && <SimpleMarkdown text={description} />}
           </span>
           {!supportability.isSupported ? (
@@ -277,7 +277,7 @@ export const BaseBlinkLayout = ({
             <>
               {disclaimer && (
                 <DisclaimerBlock
-                  className="mb-4"
+                  className="mb-gap"
                   type={disclaimer.type}
                   ignorable={disclaimer.ignorable}
                   hidden={
@@ -299,12 +299,12 @@ export const BaseBlinkLayout = ({
                 buttons={buttons}
               />
               {success && (
-                <span className="text-subtext text-text-success mt-1.5 flex justify-center">
+                <span className="text-subtext text-text-success mt-between-inputs flex justify-center">
                   {success}
                 </span>
               )}
               {error && !success && (
-                <span className="text-subtext text-text-error mt-1.5 flex justify-center">
+                <span className="text-subtext text-text-error mt-between-inputs flex justify-center">
                   {error}
                 </span>
               )}
@@ -337,9 +337,9 @@ export const ActionContent = ({
   }
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="gap-between-inputs flex flex-col">
       {buttons && buttons.length > 0 && (
-        <div className="flex flex-wrap items-center gap-2">
+        <div className="gap-between-buttons flex flex-wrap items-center">
           {buttons?.map((it, index) => (
             <div
               key={index}
@@ -397,7 +397,7 @@ const ActionForm = ({ form }: Required<Pick<InnerLayoutProps, 'form'>>) => {
   const disabled = Object.values(validity).some((v) => !v);
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className="gap-between-inputs flex flex-col">
       {form.inputs.map((input) => (
         <ActionInputFactory
           key={input.name}
diff --git a/packages/blinks/tailwind.config.js b/packages/blinks/tailwind.config.js
index e532bc04..3979a938 100644
--- a/packages/blinks/tailwind.config.js
+++ b/packages/blinks/tailwind.config.js
@@ -69,6 +69,13 @@ export default {
       boxShadow: {
         action: 'var(--blink-shadow-container)',
       },
+      spacing: {
+        padding: 'var(--blink-spacing-padding)',
+        gap: 'var(--blink-spacing-gap)',
+        'between-buttons': 'var(--blink-spacing-btwn-buttons)',
+        'between-inputs': 'var(--blink-spacing-btwn-inputs)',
+        'input-height': 'var(--blink-spacing-input-height)',
+      },
     },
   },
   plugins: [],