From 456eeac774ecca13f3094f0d55043761782635d9 Mon Sep 17 00:00:00 2001
From: Pier Francesco Ferrari <pierfrancesco@commercelayer.io>
Date: Thu, 19 Sep 2024 12:02:40 +0200
Subject: [PATCH 1/2] chore: define overlay and boxed containers behaviors over
 children

---
 packages/app-elements/src/styles/vendor.css    | 13 +++++++++++++
 packages/app-elements/src/ui/atoms/Card.tsx    |  1 +
 .../app-elements/src/ui/atoms/CodeBlock.tsx    |  2 +-
 .../src/stories/atoms/CodeBlock.stories.tsx    | 18 ++++++++++++++++++
 4 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/packages/app-elements/src/styles/vendor.css b/packages/app-elements/src/styles/vendor.css
index be196d5dc..d50b01dba 100644
--- a/packages/app-elements/src/styles/vendor.css
+++ b/packages/app-elements/src/styles/vendor.css
@@ -11,6 +11,19 @@ body {
 
 :root {
   --tw-shadow-color: rgb(230 231 231 / 1);
+  --cl-input-bg: theme(colors.gray.50);
+}
+
+.overlay-container.bg-gray-50 {
+  --cl-input-bg: theme(colors.gray.200);
+}
+
+.boxed-container.bg-white {
+  --cl-input-bg: theme(colors.gray.50);
+}
+
+.cl-input-bg {
+  background-color: var(--cl-input-bg);
 }
 
 input,
diff --git a/packages/app-elements/src/ui/atoms/Card.tsx b/packages/app-elements/src/ui/atoms/Card.tsx
index 40bf07539..10af80f5e 100644
--- a/packages/app-elements/src/ui/atoms/Card.tsx
+++ b/packages/app-elements/src/ui/atoms/Card.tsx
@@ -60,6 +60,7 @@ export const Card = withSkeletonTemplate<CardProps>(
       <JsxTag
         className={cn([
           className,
+          'boxed-container',
           'border border-solid rounded-md',
           'text-left', // reset <button>
           'text-inherit active:text-inherit hover:text-inherit font-inherit', // reset <a>
diff --git a/packages/app-elements/src/ui/atoms/CodeBlock.tsx b/packages/app-elements/src/ui/atoms/CodeBlock.tsx
index 9695cb9c8..952bafd76 100644
--- a/packages/app-elements/src/ui/atoms/CodeBlock.tsx
+++ b/packages/app-elements/src/ui/atoms/CodeBlock.tsx
@@ -43,7 +43,7 @@ export const CodeBlock = withSkeletonTemplate<CodeBlockProps>(
 
     return (
       <InputWrapper {...rest} label={label} hint={hint}>
-        <div className='flex group w-full rounded bg-gray-50 [.overlay-container_&]:bg-gray-200'>
+        <div className='flex group w-full rounded cl-input-bg'>
           <div
             tabIndex={0}
             aria-label={label}
diff --git a/packages/docs/src/stories/atoms/CodeBlock.stories.tsx b/packages/docs/src/stories/atoms/CodeBlock.stories.tsx
index 9f12351ad..0a0b20e74 100644
--- a/packages/docs/src/stories/atoms/CodeBlock.stories.tsx
+++ b/packages/docs/src/stories/atoms/CodeBlock.stories.tsx
@@ -1,7 +1,9 @@
 import { useOverlay } from '#hooks/useOverlay'
 import { Button } from '#ui/atoms/Button'
+import { Card } from '#ui/atoms/Card'
 import { CodeBlock } from '#ui/atoms/CodeBlock'
 import { PageHeading } from '#ui/atoms/PageHeading'
+import { Spacer } from '#ui/atoms/Spacer'
 import { type Meta, type StoryFn } from '@storybook/react'
 
 const setup: Meta<typeof CodeBlock> = {
@@ -123,6 +125,22 @@ export const UsageInsideOverlay: StoryFn = () => {
           -o demo-store \\
           -a admin`}
         </CodeBlock>
+
+        <Spacer top='6'>
+          <Card gap='6' overflow='visible'>
+            <CodeBlock
+              label='Login with your admin credentials'
+              showCopyAction
+              showSecretAction
+            >
+              {`commercelayer app:login \\
+            -i asdGvqXsOSsdko6ueiX9 \\
+            -s elyFpGvqXsOSss2Ua4No1_HxaKH_0rUsFuYiX9 \\
+            -o demo-store \\
+            -a admin`}
+            </CodeBlock>
+          </Card>
+        </Spacer>
       </Overlay>
     </div>
   )

From e2f9793e47e1b23b87642634145e8aaa4a767ca7 Mon Sep 17 00:00:00 2001
From: Pier Francesco Ferrari <pierfrancesco@commercelayer.io>
Date: Thu, 19 Sep 2024 12:10:20 +0200
Subject: [PATCH 2/2] fix: set real default bg of inputs

---
 packages/app-elements/src/styles/vendor.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app-elements/src/styles/vendor.css b/packages/app-elements/src/styles/vendor.css
index d50b01dba..744c4007b 100644
--- a/packages/app-elements/src/styles/vendor.css
+++ b/packages/app-elements/src/styles/vendor.css
@@ -11,7 +11,7 @@ body {
 
 :root {
   --tw-shadow-color: rgb(230 231 231 / 1);
-  --cl-input-bg: theme(colors.gray.50);
+  --cl-input-bg: theme(colors.white);
 }
 
 .overlay-container.bg-gray-50 {