chore/add spacing tokens (#45)

* add spacing tokens * fix text area overflow * upd padding token; fix input height; fix caption margin
dialectlabs · Dec 2, 2024 · cd3d07f · cd3d07f
1 parent e3674bf
commit cd3d07f
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 15 deletions.
diff --git 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 {}
-}
+  .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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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: [],