keystone-design-bootstrap 1.0.59 → 1.0.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.59",
+  "version": "1.0.60",
   "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
   "type": "module",
   "main": "./src/index.ts",

package/src/design_system/portal/LoginForm.tsx

@@ -13,7 +13,7 @@ interface LoginFormProps {
 }
 
 const inputClass =
-  'block w-full rounded border border-gray-300 bg-primary px-3 py-2.5 text-sm text-primary placeholder-gray-400 focus:border-gray-700 focus:outline-none focus:ring-1 focus:ring-gray-700 transition-colors';
+  'block w-full rounded-input border border-primary bg-primary px-3 py-2.5 text-sm text-primary placeholder-quaternary focus:border-brand focus:outline-none focus:ring-1 focus:ring-brand transition-colors';
 const labelClass = 'block text-sm text-secondary mb-1';
 
 function isValidEmail(value: string): boolean {
@@ -185,7 +185,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
       </div>
 
       {error && (
-        <div className="mb-4 rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+        <div className="mb-4 rounded-input border border-error bg-error-primary px-3 py-2 text-sm text-error-primary">
           {error}
         </div>
       )}
@@ -206,17 +206,17 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
             />
           </div>
           <div className="flex items-center gap-3">
-            <hr className="flex-1 border-gray-200" />
-            <span className="text-xs text-gray-400">or</span>
-            <hr className="flex-1 border-gray-200" />
+            <hr className="flex-1 border-secondary" />
+            <span className="text-xs text-quaternary">or</span>
+            <hr className="flex-1 border-secondary" />
           </div>
           <div>
             <label className={labelClass}>Phone number</label>
-            <div className="flex rounded border border-gray-300 overflow-hidden focus-within:border-gray-700 focus-within:ring-1 focus-within:ring-gray-700 transition-colors">
+            <div className="flex rounded-input border border-primary overflow-hidden focus-within:border-brand focus-within:ring-1 focus-within:ring-brand transition-colors">
               <select
                 value={selectedCountry}
                 onChange={(e) => { setSelectedCountry(e.target.value); setPhoneValue(''); }}
-                className="border-r border-gray-200 bg-gray-50 px-2 py-2.5 text-sm text-gray-700 focus:outline-none"
+                className="border-r border-secondary bg-secondary px-2 py-2.5 text-sm text-secondary focus:outline-none"
                 aria-label="Country code"
               >
                 {countryOptions.map((opt) => (
@@ -228,7 +228,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
                 value={phoneValue}
                 onChange={handlePhoneChange}
                 placeholder={nationalPlaceholder}
-                className="flex-1 px-3 py-2.5 text-sm text-gray-900 placeholder-gray-400 bg-transparent focus:outline-none"
+                className="flex-1 px-3 py-2.5 text-sm text-primary placeholder-quaternary bg-transparent focus:outline-none"
               />
             </div>
           </div>
@@ -236,7 +236,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
             <button
               type="submit"
               disabled={loading}
-              className="w-full rounded border border-secondary bg-primary px-4 py-2.5 text-sm font-medium text-primary hover:bg-secondary transition-colors disabled:opacity-50"
+              className="w-full rounded-interactive bg-brand-solid px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-solid_hover transition-colors disabled:opacity-50"
             >
               {loading ? 'Looking you up…' : 'Continue'}
             </button>
@@ -264,7 +264,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
             <button
               type="submit"
               disabled={loading}
-              className="w-full rounded border border-secondary bg-primary px-4 py-2.5 text-sm font-medium text-primary hover:bg-secondary transition-colors disabled:opacity-50"
+              className="w-full rounded-interactive bg-brand-solid px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-solid_hover transition-colors disabled:opacity-50"
             >
               {loading ? 'Signing in…' : 'Sign in'}
             </button>
@@ -339,7 +339,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
             <button
               type="submit"
               disabled={loading}
-              className="w-full rounded border border-secondary bg-primary px-4 py-2.5 text-sm font-medium text-primary hover:bg-secondary transition-colors disabled:opacity-50"
+              className="w-full rounded-interactive bg-brand-solid px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-solid_hover transition-colors disabled:opacity-50"
             >
               {loading ? 'Creating account…' : 'Create account'}
             </button>

package/src/design_system/portal/MessageComposer.tsx

@@ -67,12 +67,12 @@ export function MessageComposer({ contactId }: { contactId: number }) {
           placeholder="Type a message… (Enter to send)"
           rows={1}
           disabled={isPending}
-          className="flex-1 resize-none rounded-xl border border-gray-300 bg-primary px-3 py-2 text-sm text-primary placeholder-gray-400 focus:border-gray-700 focus:outline-none focus:ring-1 focus:ring-gray-700 transition-colors disabled:opacity-50"
+          className="flex-1 resize-none rounded-input border border-primary bg-primary px-3 py-2 text-sm text-primary placeholder-quaternary focus:border-brand focus:outline-none focus:ring-1 focus:ring-brand transition-colors disabled:opacity-50"
         />
         <button
           type="submit"
           disabled={!body.trim() || isPending}
-          className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-gray-900 text-white transition-colors hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed"
+          className="flex h-9 w-9 shrink-0 items-center justify-center rounded-interactive bg-brand-solid text-white transition-colors hover:bg-brand-solid_hover disabled:opacity-40 disabled:cursor-not-allowed"
           aria-label="Send message"
         >
           {isPending ? (

package/src/design_system/portal/PortalPage.tsx

@@ -165,7 +165,7 @@ function LoginWall({ message, cta = 'Sign in' }: { message: string; cta?: string
       <p className="text-sm font-medium text-primary">{message}</p>
       <button
         data-open-login-modal
-        className="mt-4 cursor-pointer rounded-lg bg-gray-900 px-5 py-2 text-sm font-semibold text-white transition-colors hover:bg-gray-700"
+        className="mt-4 cursor-pointer rounded-interactive bg-brand-solid px-5 py-2 text-sm font-semibold text-white transition-colors hover:bg-brand-solid_hover"
       >
         {cta}
       </button>
@@ -175,7 +175,7 @@ function LoginWall({ message, cta = 'Sign in' }: { message: string; cta?: string
 
 function EmptyState({ message }: { message: string }) {
   return (
-    <div className="rounded-xl border border-secondary bg-secondary py-16 text-center">
+    <div className="rounded-component border border-secondary bg-secondary py-16 text-center">
       <p className="text-sm text-tertiary">{message}</p>
     </div>
   );
@@ -214,7 +214,7 @@ function ServiceItemRow({
                   <Link
                     key={offer.id}
                     href={specialsHref}
-                    className="inline-flex items-center rounded-full bg-brand-50 border border-brand-200 px-2 py-0.5 text-xs font-medium text-brand-700 hover:bg-brand-100 transition-colors"
+                    className="inline-flex items-center rounded-badge bg-secondary border border-brand px-2 py-0.5 text-xs font-medium text-brand-secondary hover:bg-secondary_hover transition-colors"
                   >
                     Special: {offer.name}
                   </Link>
@@ -223,7 +223,7 @@ function ServiceItemRow({
                     key={offer.id}
                     data-open-login-modal
                     data-login-redirect={specialsHref}
-                    className="inline-flex items-center rounded-full bg-brand-50 border border-brand-200 px-2 py-0.5 text-xs font-medium text-brand-700 hover:bg-brand-100 transition-colors cursor-pointer"
+                    className="inline-flex items-center rounded-badge bg-secondary border border-brand px-2 py-0.5 text-xs font-medium text-brand-secondary hover:bg-secondary_hover transition-colors cursor-pointer"
                   >
                     Special: {offer.name}
                   </button>
@@ -267,7 +267,7 @@ function ServicesPanel({
   return (
     <>
       <PortalTabTracker event="ViewContent" params={{ contentName: 'Services', contentCategory: 'Services' }} />
-      <div className="divide-y divide-tertiary rounded-xl border border-secondary bg-primary overflow-hidden">
+      <div className="divide-y divide-tertiary rounded-component border border-secondary bg-primary overflow-hidden">
         {activeServices.map((service) => (
           <details key={service.id} className="group">
             <summary className="flex cursor-pointer list-none items-center justify-between px-5 py-4 hover:bg-secondary transition-colors">
@@ -325,7 +325,7 @@ function PackagesPanel({
         {packages.map((pkg) => {
           const activeOffers = (pkg.offers ?? []).filter((o) => o.active !== false && !o.expired);
           return (
-            <div key={pkg.id} className="group rounded-xl border border-secondary bg-primary p-4 flex flex-col gap-3">
+            <div key={pkg.id} className="group rounded-component border border-secondary bg-primary p-4 flex flex-col gap-3">
             <div className="flex items-start gap-3">
               <RowThumbnail
                 photoAttachments={pkg.photo_attachments}
@@ -371,7 +371,7 @@ function PackagesPanel({
                     <Link
                       key={offer.id}
                       href={specialsHref}
-                      className="inline-flex items-center rounded-full bg-brand-50 border border-brand-200 px-2.5 py-0.5 text-xs font-medium text-brand-700 hover:bg-brand-100 transition-colors"
+                      className="inline-flex items-center rounded-badge bg-secondary border border-brand px-2.5 py-0.5 text-xs font-medium text-brand-secondary hover:bg-secondary_hover transition-colors"
                     >
                       Special: {offer.name}
                     </Link>
@@ -380,7 +380,7 @@ function PackagesPanel({
                       key={offer.id}
                       data-open-login-modal
                       data-login-redirect={specialsHref}
-                      className="inline-flex items-center rounded-full bg-brand-50 border border-brand-200 px-2.5 py-0.5 text-xs font-medium text-brand-700 hover:bg-brand-100 transition-colors cursor-pointer"
+                      className="inline-flex items-center rounded-badge bg-secondary border border-brand px-2.5 py-0.5 text-xs font-medium text-brand-secondary hover:bg-secondary_hover transition-colors cursor-pointer"
                     >
                       Special: {offer.name}
                     </button>
@@ -408,7 +408,7 @@ function SpecialsPanel({ specials }: { specials: SpecialItem[] }) {
       <PortalTabTracker event="ViewContent" params={{ contentName: 'Specials', contentCategory: 'Specials' }} />
       <div className="space-y-3">
         {specials.map((special) => (
-          <div key={special.id} className="group flex items-start gap-3 rounded-xl border border-secondary bg-primary px-4 py-4">
+          <div key={special.id} className="group flex items-start gap-3 rounded-component border border-secondary bg-primary px-4 py-4">
             <RowThumbnail
               photoAttachments={special.photoAttachments}
               seed={`special-${special.id}`}
@@ -454,10 +454,10 @@ function MessagesPanel({
     businessName;
 
   return (
-    <div className="flex flex-col rounded-xl border border-secondary bg-primary overflow-hidden">
+    <div className="flex flex-col rounded-component border border-secondary bg-primary overflow-hidden">
       {/* Thread header */}
       <div className="flex items-center gap-2.5 border-b border-secondary px-4 py-3 shrink-0">
-        <div className="flex h-7 w-7 items-center justify-center rounded-full bg-gray-900 text-xs font-semibold text-white shrink-0">
+        <div className="flex h-7 w-7 items-center justify-center rounded-full bg-brand-solid text-xs font-semibold text-white shrink-0">
           {getInitials(threadBusiness)}
         </div>
         <span className="text-sm font-semibold text-primary">{threadBusiness}</span>
@@ -480,8 +480,8 @@ function MessagesPanel({
             const isOutbound = m.direction === 'outbound';
             return (
               <div key={m.id} className={`flex ${isOutbound ? 'justify-start' : 'justify-end'}`}>
-                <div className={`max-w-[80%] rounded-2xl px-4 py-2.5 text-sm ${
-                  isOutbound ? 'bg-secondary text-primary rounded-tl-sm' : 'bg-gray-900 text-white rounded-tr-sm'
+                <div className={`max-w-[80%] rounded-component px-4 py-2.5 text-sm ${
+                  isOutbound ? 'bg-secondary text-primary' : 'bg-brand-solid text-white'
                 }`}>
                   {m.sender_display_name && (
                     <p className="mb-0.5 text-xs font-medium opacity-60">{m.sender_display_name}</p>
@@ -522,7 +522,7 @@ function BookPanel({
     return (
       <>
         <PortalTabTracker event="InitiateCheckout" />
-        <div className="rounded-xl border border-secondary overflow-hidden" style={{ height: '70vh' }}>
+        <div className="rounded-component border border-secondary overflow-hidden" style={{ height: '70vh' }}>
           <iframe
             src={bookingHref}
             className="w-full h-full"
@@ -549,7 +549,7 @@ function BookPanel({
           href={bookingHref}
           target="_blank"
           rel="noopener noreferrer"
-          className="mt-5 inline-flex items-center gap-2 rounded-lg bg-gray-900 px-6 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-gray-700"
+          className="mt-5 inline-flex items-center gap-2 rounded-interactive bg-brand-solid px-6 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-brand-solid_hover"
         >
           {bookingLabel}
           <svg className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -659,7 +659,7 @@ export async function PortalPage({
                 <div className="flex items-center gap-3">
                   {consumerDisplayName && (
                     <div className="hidden sm:flex items-center gap-2 rounded-full border border-secondary bg-secondary px-3 py-1.5">
-                      <div className="flex h-5 w-5 items-center justify-center rounded-full bg-gray-900 text-[9px] font-bold text-white shrink-0">
+                      <div className="flex h-5 w-5 items-center justify-center rounded-full bg-brand-solid text-[9px] font-bold text-white shrink-0">
                         {getInitials(consumerDisplayName)}
                       </div>
                       <span className="text-xs font-medium text-secondary max-w-[120px] truncate">
@@ -672,7 +672,7 @@ export async function PortalPage({
               ) : (
                 <button
                   data-open-login-modal
-                  className="cursor-pointer rounded-lg border border-secondary px-3 py-1.5 text-xs font-medium text-secondary hover:bg-secondary transition-colors"
+                  className="cursor-pointer rounded-interactive border border-secondary px-3 py-1.5 text-xs font-medium text-secondary hover:bg-secondary transition-colors"
                 >
                   Sign in
                 </button>
@@ -691,8 +691,8 @@ export async function PortalPage({
               const isActive = tab === t.id;
               const isGated = !isLoggedIn && (t.id === 'specials' || t.id === 'messages' || t.id === 'book');
               const href = `${portalHref}?tab=${t.id}`;
-              const className = `shrink-0 rounded-lg px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap ${
-                isActive ? 'bg-gray-900 text-white' : 'text-secondary hover:bg-secondary hover:text-primary'
+              const className = `shrink-0 rounded-interactive px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap ${
+                isActive ? 'bg-brand-solid text-white' : 'text-secondary hover:bg-secondary hover:text-primary'
               }`;
               if (isGated) {
                 return (

package/src/design_system/portal/RowThumbnail.tsx

@@ -26,7 +26,7 @@ export function RowThumbnail({
 
   if (list.length === 0) {
     return (
-      <div className={`${sizeClassName} shrink-0 rounded-lg bg-secondary border border-tertiary flex items-center justify-center`}>
+      <div className={`${sizeClassName} shrink-0 rounded-component bg-secondary border border-tertiary flex items-center justify-center`}>
         <svg className="size-5 text-quaternary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
           <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
         </svg>
@@ -36,7 +36,7 @@ export function RowThumbnail({
 
   if (list.length === 1) {
     return (
-      <div className={`${sizeClassName} shrink-0 rounded-lg overflow-hidden`}>
+      <div className={`${sizeClassName} shrink-0 rounded-component overflow-hidden`}>
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           src={list[0]!.url}
@@ -48,7 +48,7 @@ export function RowThumbnail({
   }
 
   return (
-    <div className={`${sizeClassName} shrink-0 rounded-lg overflow-hidden relative`}>
+      <div className={`${sizeClassName} shrink-0 rounded-component overflow-hidden relative`}>
       <div
         className={`absolute inset-0 ${transitioning ? 'transition-opacity ease-in-out' : 'transition-none'}`}
         style={{ opacity: transitioning ? 0 : 1, ...(transitioning ? CROSSFADE_STYLE : {}) }}

package/src/styles/style-overrides.aman.css

@@ -40,6 +40,12 @@
   /* Border colors */
   --color-border-primary: #E5E2D9;
   --color-border-secondary: #D5D2C9;
+
+  /* Radius — minimal/sharp aesthetic */
+  --radius-component: 0.25rem;
+  --radius-interactive: 0.25rem;
+  --radius-input: 0.25rem;
+  --radius-badge: 0.25rem;
 }
 
 /* Body text uses Inter */

package/src/styles/style-overrides.barelux.css

@@ -40,6 +40,12 @@
   /* Border colors */
   --color-border-primary: #EEEAE7;
   --color-border-secondary: #E5E1DE;
+
+  /* Radius — soft/rounded aesthetic */
+  --radius-component: 0.75rem;
+  --radius-interactive: 0.5rem;
+  --radius-input: 0.5rem;
+  --radius-badge: 9999px;
 }
 
 /* Body text uses Poppins */

package/src/styles/theme.css

@@ -54,6 +54,12 @@
     --radius-3xl: 1.5rem;
     --radius-full: 9999px;
 
+    /* Semantic radius tokens — override per theme to get consistent rounding everywhere */
+    --radius-component: 0.5rem;    /* cards, panels, containers */
+    --radius-interactive: 0.375rem; /* buttons, tabs */
+    --radius-input: 0.375rem;       /* form inputs */
+    --radius-badge: 9999px;         /* pill badges / tags */
+
     /* ==================== SHADOWS ==================== */
     --shadow-xs: 0px 1px 2px rgba(10, 13, 18, 0.05);
     --shadow-sm: 0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px -1px rgba(10, 13, 18, 0.1);