Alert design review improvements (#338)

# Contents

Alert design review improvements 

---------

Co-authored-by: Jaap-Hein Wester <j.h.wester@setonix.nl>

Author: MMeijerink

.changeset/two-elephants-exist.md

@@ -0,0 +1,7 @@
+---
+"@lux-design-system/components-react": patch
+---
+
+💡
+
+Bugfix: paragraph color

packages/components-react/src/alert/Alert.css

@@ -17,4 +17,5 @@
   --utrecht-heading-6-color: var(--utrecht-alert-color);
   --utrecht-heading-6-font-size: var(--lux-alert-heading-font-size);
   --utrecht-heading-6-line-height: var(--lux-alert-heading-font-size);
+  --utrecht-paragraph-color: var(--utrecht-alert-color);
 }

packages/storybook/src/react-components/alert/alert.stories.tsx

@@ -37,16 +37,17 @@ export default meta;
 const AlertTemplate: Story = {
   args: {
     type: 'info',
-    children: (
+  },
+  render: ({ ...args }: LuxAlertProps, context) => (
+    <LuxAlert {...args}>
       <>
-        <LuxHeading1>Heading</LuxHeading1>
+        <LuxHeading1>{context.name}</LuxHeading1>
         <LuxParagraph>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis massa lorem. Ut laoreet varius rhoncus.
         </LuxParagraph>
       </>
-    ),
-  },
-  render: ({ children, ...args }: LuxAlertProps) => <LuxAlert {...args}>{children}</LuxAlert>,
+    </LuxAlert>
+  ),
 };
 
 export const Playground: Story = {