feat(redmine 1306612): correction to color contrast

Smile-SA · Aug 6, 2024 · 932eb12 · 932eb12
1 parent 81ba004
commit 932eb12
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 3 deletions.
diff --git a/.changeset/curvy-zoos-stare.md b/.changeset/curvy-zoos-stare.md
@@ -0,0 +1,5 @@
+---
+'@smile/haring-react': minor
+---
+
+make corrections to color contrasts
diff --git a/packages/haring-react/src/Components/CardHeader/CardHeader.stories.tsx b/packages/haring-react/src/Components/CardHeader/CardHeader.stories.tsx
@@ -27,7 +27,7 @@ const meta = {
               </Badge>
             </Group>
 
-            <Text color="dimmed" size="sm">
+            <Text c="dark.3" size="sm">
               With Fjord Tours you can explore more of the magical fjord
               landscapes with tours and activities on and around the fjords of
               Norway

diff --git a/packages/haring-react/src/Components/DataBadge/DataBadge.stories.tsx b/packages/haring-react/src/Components/DataBadge/DataBadge.stories.tsx
@@ -1,11 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { DEFAULT_THEME } from '@mantine/core';
+
 import { DataBadge as Cmp } from './DataBadge';
 
+const colorOptions = Object.keys(DEFAULT_THEME.colors);
 const meta = {
   argTypes: {
     color: {
-      control: { type: 'color' },
+      control: 'select',
+      options: colorOptions,
     },
   },
   component: Cmp,

diff --git a/packages/haring-react/src/Components/Header/Header.stories.tsx b/packages/haring-react/src/Components/Header/Header.stories.tsx
@@ -52,6 +52,13 @@ const meta = {
 
 export default meta;
 type IStory = StoryObj<typeof meta>;
+const customPrimaryTheme = {
+  ...primaryTheme,
+  colors: {
+    dark: ['#1E0303'],
+    ...primaryTheme.colors,
+  },
+};
 
 export const Header: IStory = {
   args: {
@@ -66,7 +73,7 @@ export const Header: IStory = {
     },
     onSearchSubmit: action('search input submitted'),
     right: rightContentMock,
-    searchTheme: primaryTheme,
+    searchTheme: customPrimaryTheme,
     searchValue: '',
     withBorder: false,
   },