feat(banner): add dark mode

freenowtech · Sep 27, 2023 · 0041511 · 0041511
1 parent 3c9ac05
commit 0041511
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 8 deletions.
diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx
@@ -61,13 +61,16 @@ const riseUp = css`
 const bannerVariants = variant({
     variants: {
         info: {
-            backgroundColor: getSemanticValue('background-surface-neutral-emphasized')
+            backgroundColor: getSemanticValue('background-surface-neutral-emphasized'),
+            color: getSemanticValue('foreground-on-background-neutral')
         },
         success: {
-            backgroundColor: getSemanticValue('background-surface-success-emphasized')
+            backgroundColor: getSemanticValue('background-surface-success-emphasized'),
+            color: getSemanticValue('foreground-on-background-success')
         },
         danger: {
-            backgroundColor: getSemanticValue('background-surface-danger-emphasized')
+            backgroundColor: getSemanticValue('background-surface-danger-emphasized'),
+            color: getSemanticValue('foreground-on-background-danger')
         }
     }
 });
@@ -117,6 +120,7 @@ const AnimatedBanner = styled.div.attrs({ theme })<BannerProps>`
     box-sizing: border-box;
     padding: ${get('space.3')};
     background-color: ${getSemanticValue('background-surface-neutral-emphasized')};
+    color: ${getSemanticValue('foreground-on-background-info')};
 
     position: fixed;
     left: 0;

diff --git a/src/components/Banner/docs/Banner.stories.tsx b/src/components/Banner/docs/Banner.stories.tsx
@@ -26,7 +26,7 @@ const meta: Meta = {
     },
     args: {
         children: (
-            <Text inverted>
+            <Text>
                 In order to continuously improve our websites, and show offers and advertisements that are suited to
                 you, we use cookies, tracking and (re-) targeting technologies. Please see our Cookie policy for more
                 information. Tracking and (re-) targeting technologies will only be used if you click on Agree.
@@ -60,7 +60,7 @@ type Story = StoryObj<typeof Banner>;
 
 export const Default: Story = {
     args: {
-        children: <Text inverted>Hello</Text>
+        children: <Text style={{color: 'inherit'}}>Hello</Text>
     }
 };
 
@@ -73,7 +73,7 @@ export const Success: Story = {
 export const Danger: Story = {
     args: {
         variant: 'danger',
-        children: <Text inverted>Oops! Something went wrong</Text>
+        children: <Text>Oops! Something went wrong</Text>
     }
 };
 
@@ -87,7 +87,7 @@ export const WithDismissedFn: Story = {
     args: {
         children: dismiss => (
             <>
-                <Text inverted>If you are tired of this banner, hit the button 👉 </Text>
+                <Text>If you are tired of this banner, hit the button 👉 </Text>
                 <Button onClick={dismiss}>Close</Button>
             </>
         )

diff --git a/src/components/Banner/docs/Banner.storybook.mdx b/src/components/Banner/docs/Banner.storybook.mdx
@@ -1,4 +1,4 @@
-import { Meta, ArgTypes, Primary, Story, Stories } from '@storybook/blocks';
+import { Meta, ArgTypes, Primary, Story, Stories, Unstyled } from '@storybook/blocks';
 import * as BannerStories from './Banner.stories';
 import { Advice } from '../../../docs/Advice';
 
@@ -28,8 +28,10 @@ and bear in mind that you can use the **position** prop for it.
 <ArgTypes of={BannerStories.Default} />
 
 <Advice>
+    <Unstyled>
     The `Banner` uses `position:sticky` for positioning. It means it will always be rendered on top/bottom of the
     viewport ([MDN](http://developer.mozilla.org/en-US/docs/Web/CSS/position)).
+    </Unstyled>
 </Advice>
 
 ## Visibility management (dismiss function)

diff --git a/src/docs/Advice.tsx b/src/docs/Advice.tsx
@@ -4,6 +4,7 @@ import { getSemanticValue } from '../utils/cssVariables';
 export const Advice = styled.div`
     border: 0.0625rem solid ${getSemanticValue('border-info-faded')};
     background-color: ${getSemanticValue('background-surface-info-active')};
+    color: ${getSemanticValue('foreground-primary')};
     box-sizing: border-box;
     padding: 1rem;
     width: 100%;