From 50c7d94f8ff2c176608db1cc10b3851886c91de9 Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Wed, 5 Oct 2022 09:39:45 -0300
Subject: [PATCH] fix(fuselage): Callout Component Style Update (#862)

---
 .../components/Callout/Callout.stories.tsx    |  4 +++-
 .../components/Callout/Callout.styles.scss    | 20 ++++++++++---------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/fuselage/src/components/Callout/Callout.stories.tsx b/packages/fuselage/src/components/Callout/Callout.stories.tsx
index 2e061c7166..c0bbf3330f 100644
--- a/packages/fuselage/src/components/Callout/Callout.stories.tsx
+++ b/packages/fuselage/src/components/Callout/Callout.stories.tsx
@@ -37,7 +37,9 @@ export default {
 } as ComponentMeta<typeof Callout>;
 
 const Template: ComponentStory<typeof Callout> = (args) => (
-  <Callout {...args}>This is a generic description.</Callout>
+  <Callout {...args}>
+    {args.children || 'This is a generic description.'}
+  </Callout>
 );
 
 export const Default = Template.bind({});
diff --git a/packages/fuselage/src/components/Callout/Callout.styles.scss b/packages/fuselage/src/components/Callout/Callout.styles.scss
index 9de9a090dd..f621456751 100644
--- a/packages/fuselage/src/components/Callout/Callout.styles.scss
+++ b/packages/fuselage/src/components/Callout/Callout.styles.scss
@@ -5,15 +5,14 @@
 .rcx-callout {
   display: flex;
 
-  padding-block: lengths.padding(16);
-  padding-inline-start: lengths.padding(16);
-  padding-inline-end: lengths.padding(32);
+  padding-block: lengths.padding(8);
+  padding-inline: lengths.padding(16);
 
   color: theme('callout-color', colors.font(default));
 
   border-radius: theme('callout-border-radius', lengths.border-radius(medium));
 
-  background-color: theme('callout-background-color', colors.surface(neutral));
+  background-color: theme('callout-background-color', colors.neutral(200));
 
   &--type-info {
     color: theme('callout-color-info', colors.status-font(on-info));
@@ -55,21 +54,24 @@
   flex-flow: column nowrap;
   flex: 1 1 0;
 
-  margin-inline-start: lengths.margin(8);
+  margin-inline-start: lengths.margin(12);
 
   @include typography.use-font-scale(c1);
+
+  > :nth-child(2) {
+    margin-block-start: lengths.margin(4);
+  }
 }
 
 .rcx-callout__title {
-  padding-block: lengths.padding(2);
+  white-space: nowrap;
 
-  @include typography.use-font-scale(c2);
+  @include typography.use-font-scale(p2b);
   @include typography.use-text-ellipsis;
-  white-space: nowrap;
 }
 
 .rcx-callout__children {
   display: block;
 
-  padding-block: lengths.padding(2);
+  @include typography.use-font-scale(p2);
 }