diff --git a/.storybook/FreenowTheme.ts b/.storybook/FreenowTheme.ts
index 91ee73297..430ac43e7 100644
--- a/.storybook/FreenowTheme.ts
+++ b/.storybook/FreenowTheme.ts
@@ -1,19 +1,20 @@
// .storybook/FreenowTheme.ts
import { create } from '@storybook/theming/create';
-export default create({
- base: 'light',
-
- // Typography
+const baseVars = {
fontBase: '"Open Sans", sans-serif',
fontCode: 'monospace',
brandTitle: 'FREENOW',
brandUrl: 'https://wave.free-now.com/',
brandImage: 'https://wave.free-now.com/freenow-logo.svg',
- brandTarget: '_self',
+ brandTarget: '_self'
+};
+
+export const LightTheme = create({
+ base: 'light',
+ ...baseVars,
- //
colorPrimary: '#CA0928',
colorSecondary: '#585C6D',
@@ -38,3 +39,11 @@ export default create({
inputTextColor: '#10162F',
inputBorderRadius: 2
});
+
+export const DarkTheme = create({
+ base: 'dark',
+ appContentBg: 'hsl(0deg, 0%, 5%)',
+ appPreviewBg: '#222425',
+ inputTextColor: 'blue',
+ ...baseVars
+});
diff --git a/.storybook/main.ts b/.storybook/main.ts
index 043b59d09..380a9d235 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -6,7 +6,8 @@ const config: StorybookConfig = {
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
- '@storybook/addon-viewport'
+ '@storybook/addon-viewport',
+ 'storybook-dark-mode'
],
framework: {
name: '@storybook/react-webpack5',
diff --git a/.storybook/manager.ts b/.storybook/manager.ts
deleted file mode 100644
index 2c0cbe8ed..000000000
--- a/.storybook/manager.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// .storybook/manager.ts
-import { addons } from '@storybook/manager-api';
-import FreenowTheme from './FreenowTheme';
-
-addons.setConfig({
- theme: FreenowTheme
-});
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 78ad29662..473be03ac 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,9 +1,14 @@
import React from 'react';
import { Preview } from '@storybook/react';
import { themes } from '@storybook/theming';
+import { DocsContainer } from '@storybook/addon-docs';
+import { useDarkMode } from 'storybook-dark-mode';
+
import { GlobalStyle as ClassicColors } from '../src/essentials/Colors/Colors';
import { GlobalStyle as ModernColors } from '../src/essentials/Colors/ModernColors';
-import { getSemanticValue } from '../src/utils/cssVariables';
+import { DarkScheme, LightScheme } from '../src/components/ColorScheme';
+
+import { LightTheme, DarkTheme } from './FreenowTheme';
const THEMES = {
classic: ClassicColors,
@@ -15,16 +20,34 @@ export const withTheme = (Story, context) => {
return (
<>
-
-
-
+
);
};
+export const withColorScheme = (Story, context) => {
+ const SchemeWrapper = useDarkMode() ? DarkScheme : LightScheme;
+
+ return (
+
+
+
+ );
+};
+
export const preview: Preview = {
- decorators: [withTheme],
+ decorators: [withTheme, withColorScheme],
parameters: {
+ darkMode: {
+ dark: { ...themes.dark, ...DarkTheme },
+ light: {
+ ...themes.normal,
+ ...LightTheme
+ },
+ lightClass: ['wave', 'light-scheme'],
+ darkClass: ['wave', 'dark-scheme'],
+ stylePreview: true
+ },
actions: { argTypesRegex: '^on[A-Z].*' },
viewMode: 'docs',
controls: {
@@ -40,18 +63,24 @@ export const preview: Preview = {
}
},
docs: {
- theme: themes.light,
+ container: props => {
+ const scheme = useDarkMode() ? DarkTheme : LightTheme;
+ const globals = props.context.store.globals.get();
+ const WaveTheme = THEMES[globals.theme];
+
+ return (
+ <>
+
+
+
+ );
+ },
toc: {
headingSelector: 'h2, h3'
}
},
backgrounds: {
- 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') }
- ]
+ disable: true
},
viewport: {
viewports: {
diff --git a/docs/assets/wave-background.svg b/docs/assets/wave-background.svg
index 66caf1801..72b4d1642 100644
--- a/docs/assets/wave-background.svg
+++ b/docs/assets/wave-background.svg
@@ -1,90 +1,51 @@
-
-
-