Add dark mode (#385)

* docs: fix broken colors page * feat(button): add dark mode for the button * feat: add ColorMode wrapper components to force a certain color mode * docs: add documentation for ColorMode component * test: ColorMode wrapper test * docs: add documentation of the InvertedColorMode component * feat(button): add dark mode for the text button * feat(input): add dark mode * feat(password): add dark mode * feat(select): add dark mode * feat(select-list): add dark mode * feat(textarea): add dark mode * feat(datepicker): add dark mode * feat(tooltip): add dark mode * feat(tag): add dark mode * feat(search): add dark mode * feat(checkbox): add dark mode * feat(radiobutton): add dark mode * feat(toggle): add dark mode * feat(filepicker): add dark mode * feat(card): add dark mode * feat(modal): add dark mode * feat(headline): add dark mode * feat(tooltip): add dark mode * feat(accordion): add dark mode * feat(popover): add dark mode * feat(pagination): add dark mode * feat(table): add dark mode * feat(table): fix dark mode * feat(label): add dark mode * feat(Text): add dark mode * feat(HelperText): add dark mode * feat(Link): add dark mode * refactor: remove inverted props from docs * feat(text): change default color to "inherit" BREAKING CHANGE Text component will inherit the color from the surrounding context by default. In most of the cases it will be the primary color. New `primary` prop is added to enforce the primary text color * feat(banner): add dark mode * feat(infobanner): add dark mode * docs(infobanner): revert docs * fix(infobanner): fix links color * refactor: cleanup * feat(logo): support dark theme * feat(breadcrumb): add dark-mode * feat(color-scheme): rename and update related components Signed-off-by: Nikolai Lopin <nikolai.lopin@mytaxi.com> * refactor(infobanner): use building blocks for the default infobanner Signed-off-by: Nikolai Lopin <nikolai.lopin@mytaxi.com> * refactor(icon): inherit color from parent by default Signed-off-by: Nikolai Lopin <nikolai.lopin@mytaxi.com> * test: fix codemode outputs Signed-off-by: Nikolai Lopin <nikolai.lopin@mytaxi.com> * docs: fix the spelling Co-authored-by: martimalek <46452321+martimalek@users.noreply.github.com> * docs: fix the error in InvertedColorScheme description Co-authored-by: martimalek <46452321+martimalek@users.noreply.github.com> * fix(color): delete unused colors Signed-off-by: Nikolai Lopin <nikolai.lopin@mytaxi.com> * refactor(color): extract global style generation Signed-off-by: Nikolai Lopin <nikolai.lopin@mytaxi.com> * fix(infobanner): fix imports Signed-off-by: Nikolai Lopin <nikolai.lopin@mytaxi.com> * fix(input): create internal size prop for input The current solution relied on `size` property used on all levels. It caused TS errors because `input` HTML element already have `size` prop. Those two definitions were merged by TS causing type mismatch. I decided to create a separate `waveSize` property for HTML components to separate. I preserved the public API, while using the `waveSize` over the `size` internally Signed-off-by: Nikolai Lopin <nikolai.lopin@mytaxi.com> --------- Signed-off-by: Nikolai Lopin <nikolai.lopin@mytaxi.com> Co-authored-by: Phillip Barkmann <p.barkmann@mytaxi.com> Co-authored-by: Nelson Dornelas <nelson.dornelas@free-now.com> Co-authored-by: martimalek <46452321+martimalek@users.noreply.github.com>
freenowtech · Nov 6, 2023 · 60ae4ed · 60ae4ed
1 parent 5b95032
commit 60ae4ed
Show file tree

Hide file tree

Showing 358 changed files with 1,928 additions and 1,862 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -14,7 +14,9 @@ export const withTheme = (Story, context) => {
     return (
         <>
             <Theme />
-            <Story {...context} />
+            <div className="wave">
+                <Story {...context} />
+            </div>
         </>
     );
 };
@@ -43,8 +45,9 @@ export const preview: Preview = {
             }
         },
         backgrounds: {
-            default: 'light',
+            default: 'auto',
             values: [
+                { name: 'auto', value: getSemanticValue('background-page-default') },
                 { name: 'light', value: getSemanticValue('background-surface-neutral-default') },
                 { name: 'dark', value: getSemanticValue('background-surface-primary-default') }
             ]

diff --git a/docs/changelog.mdx b/docs/changelog.mdx
diff --git a/docs/components/BoxWithSchemeToggle.tsx b/docs/components/BoxWithSchemeToggle.tsx
@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { Box } from '../../src/components/Box/Box';
+import { Toggle } from '../../src/components/Toggle/Toggle';
+import { getSemanticValue } from '../../src/utils/cssVariables';
+import { ItemWrapper } from './ItemWrapper';
+import { Text } from '../../src/components/Text/Text';
+
+export const BoxWithSchemeToggle = ({ children }: { children: React.ReactNode }) => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const [isLight, setIsLight] = useState(window.matchMedia('(prefers-color-scheme: light)').matches);
+    return (
+        <Box className='wave'>
+            <Box
+                p={2}
+                display="flex"
+                alignItems="center"
+                style={{
+                    backgroundColor: getSemanticValue('background-surface-neutral-faded')
+                }}
+            >
+                <Text>Light</Text>
+                <Box px={1}>
+                    <Toggle
+                        value={isLight}
+                        onChange={() => {
+                            setIsLight(prev => !prev);
+                        }}
+                    />
+                </Box>
+                <Text>Dark</Text>
+            </Box>
+            <ItemWrapper className={`${isLight ? 'light-scheme' : 'dark-scheme'} wave`} p={2}>
+                {children}
+            </ItemWrapper>
+        </Box>
+    );
+};
diff --git a/docs/components/ItemWrapper.ts b/docs/components/ItemWrapper.ts
@@ -6,7 +6,7 @@ import { getSemanticValue } from '../../src/utils/cssVariables';
 type ItemWrapperProps = PaddingProps &
     MarginProps & {
         inverted?: boolean;
-        gridTemplate: string;
+        gridTemplate?: string;
     };
 
 const ItemWrapper = styled.div<ItemWrapperProps>`
@@ -18,8 +18,7 @@ const ItemWrapper = styled.div<ItemWrapperProps>`
     grid-template-columns: ${p => (p.gridTemplate ? p.gridTemplate : '1fr')};
     grid-row-gap: ${Spaces[3]};
     grid-column-gap: ${Spaces[2]};
-    background-color: ${p =>
-        getSemanticValue(p.inverted ? 'background-surface-primary-default' : 'background-surface-neutral-default')};
+    background-color: ${getSemanticValue('background-page-default')};
 
     ${compose(padding, margin)}
 `;

diff --git a/docs/migrating.storybook.mdx b/docs/migrating.storybook.mdx
@@ -75,4 +75,3 @@ npx jscodeshift -t node_modules/@freenow/wave/lib/cjs/codemods/tooltip-placement
 You can find the mappings in the following table:
 
 <PlacementMappingsTable />
-
diff --git a/scripts/generate-icons b/scripts/generate-icons
@@ -49,7 +49,7 @@ function template(babel, opts, { imports, componentName, props, jsx, exports })
     const name = generate(componentName).code;
     const nameDecl = `${name}: React.FC<Props>`;
 
-    const iconProps = opts.colorProp ? "({ size = 'medium', color = getSemanticValue('foreground-primary'), ...rest})" :
+    const iconProps = opts.colorProp ? "({ size = 'medium', color = 'inherit', ...rest})" :
         "({ size = 'medium', ...props})";
 
     return babel.template.smart({ plugins: ['typescript'] }).ast`

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/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -1,4 +1,4 @@
-import React, { Children, ComponentPropsWithoutRef, ReactElement, ReactNode, cloneElement } from 'react';
+import React, { Children, ReactElement, ReactNode, cloneElement } from 'react';
 import styled from 'styled-components';
 
 import { ChevronRightIcon } from '../../icons';
@@ -9,26 +9,14 @@ import { get } from '../../utils/themeGet';
 import { Box } from '../Box/Box';
 import { getSemanticValue } from '../../utils/cssVariables';
 
-interface InvertedStyle {
-    /**
-     * Adjust color for display on a dark background
-     * @default false
-     */
-    inverted?: boolean;
-}
-
-interface BreadcrumbsProps extends InvertedStyle {
+interface BreadcrumbsProps {
     /**
      * Content of the Breadcrumbs
      * @required
      */
     children: ReactNode;
 }
 
-interface LinkProps extends ComponentPropsWithoutRef<'a'>, InvertedStyle {}
-
-type ItemProps = InvertedStyle;
-
 const BreadcrumbsList = styled.ul`
     padding: 0;
     list-style: none;
@@ -39,18 +27,14 @@ const BreadcrumbsListItem = styled.li`
     display: flex;
 `;
 
-const Breadcrumbs = ({ children, inverted }: BreadcrumbsProps): JSX.Element => {
+const Breadcrumbs = ({ children }: BreadcrumbsProps): JSX.Element => {
     const arrayChildren = Children.toArray(children);
 
     return (
         <BreadcrumbsList>
             {Children.map(arrayChildren, (child, index) => (
                 <BreadcrumbsListItem>
-                    <nav aria-label="breadcrumbs">
-                        {cloneElement(child as ReactElement, {
-                            inverted
-                        })}
-                    </nav>
+                    <nav aria-label="breadcrumbs">{cloneElement(child as ReactElement)}</nav>
                     {index < arrayChildren.length - 1 ? (
                         <Box height={16} mt="0.125rem">
                             <ChevronRightIcon size={16} color={getSemanticValue('foreground-neutral-default')} />
@@ -63,12 +47,9 @@ const Breadcrumbs = ({ children, inverted }: BreadcrumbsProps): JSX.Element => {
     );
 };
 
-const Link = styled.a.attrs({ theme })<LinkProps>`
+const Link = styled.a.attrs({ theme })`
     display: inline-block;
-    color: ${p =>
-        p.inverted
-            ? getSemanticValue('foreground-on-background-primary')
-            : getSemanticValue('foreground-accent-default')};
+    color: ${getSemanticValue('foreground-accent-default')};
     cursor: pointer;
     line-height: 1.4;
     font-family: ${get('fonts.normal')};
@@ -78,19 +59,15 @@ const Link = styled.a.attrs({ theme })<LinkProps>`
 
     &:hover,
     &:active {
-        color: ${p =>
-            p.inverted
-                ? getSemanticValue('foreground-neutral-default')
-                : getSemanticValue('foreground-accent-emphasized')};
+        color: ${getSemanticValue('foreground-accent-emphasized')};
         text-decoration: underline;
     }
 `;
 
-const Item = styled(Text).attrs(({ inverted }: ItemProps) => ({
-    secondary: inverted,
+const Item = styled(Text).attrs(() => ({
     fontSize: 'small',
     padding: '0 0.25rem 0 0.25rem'
-}))<ItemProps>``;
+}))``;
 
 Breadcrumbs.Item = Item;
 Breadcrumbs.Link = Link;

diff --git a/src/components/Breadcrumbs/docs/Breadcrumbs.stories.tsx b/src/components/Breadcrumbs/docs/Breadcrumbs.stories.tsx
@@ -1,6 +1,5 @@
 import { StoryObj, Meta } from '@storybook/react';
 
-import { onDarkBackground } from '../../../docs/parameters';
 import { Breadcrumbs } from '../Breadcrumbs';
 import { DefaultBreadcrumbs } from './DefaultBreadcrumbs';
 
@@ -33,14 +32,4 @@ type Story = StoryObj<typeof Breadcrumbs>;
 
 export const Default: Story = {
     render: DefaultBreadcrumbs
-};
-
-export const Inverted: Story = {
-    args: {
-        inverted: true
-    },
-    render: DefaultBreadcrumbs,
-    parameters: {
-        ...onDarkBackground
-    }
-};
+};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -75,4 +75,3 @@ npx jscodeshift -t node_modules/@freenow/wave/lib/cjs/codemods/tooltip-placement
		You can find the mappings in the following table:

		<PlacementMappingsTable />