Add base wireframe color scheme

example/storybook/stories/BrandConfigProvider/BrandConfigProvider.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { View, ViewStyle } from 'react-native';
 import { storiesOf } from '@storybook/react-native';
-import { object, color } from '@storybook/addon-knobs';
+import { object } from '@storybook/addon-knobs';
 import { BrandConfigProvider, Theme } from 'src';
 import { ThemeExampleScreen } from './ThemeExampleScreen';
 import * as baseTheme from 'src/components/BrandConfigProvider/theme/base';
@@ -12,21 +12,6 @@ import { BrandConfigProviderStyles } from 'src/components/BrandConfigProvider/ty
 storiesOf('BrandConfigProvider', module)
   .addDecorator((story) => <View style={centerView}>{story()}</View>)
 
-  .add('Basic Theme Colors', () => {
-    const customColors: Record<string, string> = {};
-    Object.entries(baseTheme.colors).forEach(([key, value]) => {
-      customColors[key] = color(key, value);
-    });
-
-    const theme = new Theme({ colors: customColors });
-
-    return (
-      <BrandConfigProvider theme={theme}>
-        <ThemeExampleScreen />
-      </BrandConfigProvider>
-    );
-  })
-
   .add('Default Theme', () => {
     const customColors = object('theme.colors', baseTheme.colors);
     const customSpacing = object('theme.spacing', baseTheme.spacing);

example/storybook/stories/BrandConfigProvider/ExampleBox.tsx

@@ -24,13 +24,14 @@ const defaultStyles = (theme: Theme) => {
     width: '63%',
     margin: theme.spacing.large,
     padding: theme.spacing.small,
-    borderColor: theme.colors.border,
+    borderColor: theme.colors.onSurface,
+    backgroundColor: theme.colors.surface,
     borderWidth: 1,
     borderRadius: 8,
   };
 
   const text: TextStyle = {
-    color: theme.colors.text,
+    color: theme.colors.onSurface,
   };
 
   return {

example/storybook/stories/BrandConfigProvider/ThemeExampleScreen.tsx

@@ -6,19 +6,20 @@ import { useTheme } from 'src/hooks/useTheme';
 export function ThemeExampleScreen() {
   const { theme } = useTheme();
 
-  const centerView: ViewStyle = {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+  const containerView: ViewStyle = {
     backgroundColor: theme.colors.background,
   };
 
-  const blackText: TextStyle = {
-    color: theme.colors.black,
+  const primaryText: TextStyle = {
+    color: theme.colors.onPrimary,
+  };
+
+  const secondaryText: TextStyle = {
+    color: theme.colors.onSecondary,
   };
 
-  const whiteText: TextStyle = {
-    color: theme.colors.white,
+  const tertiaryText: TextStyle = {
+    color: theme.colors.onTertiary,
   };
 
   const primaryView: ViewStyle = {
@@ -29,59 +30,68 @@ export function ThemeExampleScreen() {
     backgroundColor: theme.colors.secondary,
   };
 
+  const tertiaryView: ViewStyle = {
+    backgroundColor: theme.colors.tertiary,
+  };
+
   const tileView: ViewStyle = {
-    width: '63%',
+    minWidth: 200,
     margin: theme.spacing.large,
     padding: theme.spacing.small,
-    borderColor: theme.colors.border,
     borderWidth: 1,
-    borderRadius: 8,
+    borderRadius: theme.roundness,
+    alignItems: 'center',
   };
 
   const normalText: TextStyle = {
-    color: theme.colors.text,
+    color: theme.colors.onBackground,
   };
 
-  const dimText: TextStyle = {
-    color: theme.colors.textDim,
+  const disabledText: TextStyle = {
+    color: theme.colors.onSurfaceDisabled,
   };
 
   const separatorView: ViewStyle = {
     margin: theme.spacing.large,
     width: '80%',
     height: 1,
-    backgroundColor: theme.colors.separator,
+    backgroundColor: theme.colors.outline,
   };
 
   const errorView: ViewStyle = {
     margin: theme.spacing.large,
     padding: theme.spacing.small,
-    backgroundColor: theme.colors.errorBackground,
-    borderColor: theme.colors.error,
+    backgroundColor: theme.colors.error,
+    borderColor: theme.colors.onErrorContainer,
     borderWidth: 1,
     borderRadius: 32,
+    alignItems: 'center',
   };
 
   const errorText: TextStyle = {
-    color: theme.colors.error,
+    color: theme.colors.onError,
   };
 
   return (
-    <View style={centerView}>
+    <View style={containerView}>
       <View style={[tileView, primaryView]}>
-        <Text style={whiteText}>Primary color (white text)</Text>
+        <Text style={primaryText}>Primary</Text>
       </View>
 
       <View style={[tileView, secondaryView]}>
-        <Text style={blackText}>Secondary color (black text)</Text>
+        <Text style={secondaryText}>Secondary</Text>
+      </View>
+
+      <View style={[tileView, tertiaryView]}>
+        <Text style={tertiaryText}>Tertiary</Text>
       </View>
 
       <View style={tileView}>
         <Text style={normalText}>This is normal text color</Text>
       </View>
 
       <View style={tileView}>
-        <Text style={dimText}>This is dim text color</Text>
+        <Text style={disabledText}>This is dim text color</Text>
       </View>
 
       <View style={separatorView} />

src/components/BrandConfigProvider/index.ts

@@ -1,2 +1,3 @@
 export { BrandConfigProvider } from './BrandConfigProvider';
 export { Theme } from './theme/Theme';
+export { NamedStylesProp } from './types';

src/components/BrandConfigProvider/theme/Theme.test.tsx

@@ -17,7 +17,7 @@ describe('Theme', () => {
     const theme = new Theme({ colors: customColors });
 
     expect(theme.colors.background).toBe('pink');
-    expect(theme.colors.text).toBe(baseColors.text);
+    expect(theme.colors.onBackground).toBe(baseColors.onBackground);
   });
 
   test('merges custom spacing with default', () => {

src/components/BrandConfigProvider/theme/Theme.ts

@@ -3,15 +3,18 @@ import * as baseTheme from './base';
 interface Props {
   colors?: Partial<baseTheme.Colors>;
   spacing?: Partial<baseTheme.Spacing>;
+  roundness?: number;
 }
 
 export class Theme {
   colors: baseTheme.Colors = { ...baseTheme.colors };
   spacing: baseTheme.Spacing = { ...baseTheme.spacing };
+  roundness: number;
 
-  constructor({ colors, spacing }: Props = {}) {
+  constructor({ colors, spacing, roundness }: Props = {}) {
     this.mergeColors(colors || {});
     this.mergeSpacing(spacing || {});
+    this.roundness = roundness || baseTheme.roundness;
   }
 
   mergeColors(colors: Partial<baseTheme.Colors>) {

src/components/BrandConfigProvider/theme/base/colors.ts

@@ -1,32 +1,118 @@
-const palette = {
-  neutral200: '#F4F2F1',
-  neutral300: '#D7CEC9',
-  neutral400: '#B6ACA6',
-  neutral600: '#564E4A',
-  neutral800: '#191015',
-
-  blueGray200: '#B0BEC5',
-  blueGray800: '#37474F',
-
-  error100: '#F2D6CD',
-  error500: '#C03403',
-};
+/**
+ * Base (wireFrame-like) color scheme
+ *
+ * The base color scheme uses the Material Design 3 system to
+ * dynamically generate all colors from the HTML color:
+ * "gray" - #808080	- rgb(128,128,128)
+ */
+const scheme = {
+  light: {
+    primary: 'rgb(0, 104, 116)',
+    onPrimary: 'rgb(255, 255, 255)',
+    primaryContainer: 'rgb(151, 240, 255)',
+    onPrimaryContainer: 'rgb(0, 31, 36)',
+
+    secondary: 'rgb(74, 98, 103)',
+    onSecondary: 'rgb(255, 255, 255)',
+    secondaryContainer: 'rgb(205, 231, 236)',
+    onSecondaryContainer: 'rgb(5, 31, 35)',
+
+    tertiary: 'rgb(82, 94, 125)',
+    onTertiary: 'rgb(255, 255, 255)',
+    tertiaryContainer: 'rgb(218, 226, 255)',
+    onTertiaryContainer: 'rgb(14, 27, 55)',
+
+    error: 'rgb(186, 26, 26)',
+    onError: 'rgb(255, 255, 255)',
+    errorContainer: 'rgb(255, 218, 214)',
+    onErrorContainer: 'rgb(65, 0, 2)',
+
+    background: 'rgb(250, 253, 253)',
+    onBackground: 'rgb(25, 28, 29)',
+
+    surface: 'rgb(250, 253, 253)',
+    onSurface: 'rgb(25, 28, 29)',
+    surfaceVariant: 'rgb(219, 228, 230)',
+    onSurfaceVariant: 'rgb(63, 72, 74)',
+
+    outline: 'rgb(111, 121, 122)',
+    outlineVariant: 'rgb(191, 200, 202)',
+
+    shadow: 'rgb(0, 0, 0)',
+    scrim: 'rgb(0, 0, 0)',
+    inverseSurface: 'rgb(46, 49, 50)',
+    inverseOnSurface: 'rgb(239, 241, 241)',
+    inversePrimary: 'rgb(79, 216, 235)',
+
+    elevation: {
+      level0: 'transparent',
+      level1: 'rgb(238, 246, 246)',
+      level2: 'rgb(230, 241, 242)',
+      level3: 'rgb(223, 237, 238)',
+      level4: 'rgb(220, 235, 237)',
+      level5: 'rgb(215, 232, 234)',
+    },
+
+    surfaceDisabled: 'rgba(25, 28, 29, 0.12)',
+    onSurfaceDisabled: 'rgba(25, 28, 29, 0.38)',
+
+    backdrop: 'rgba(41, 50, 52, 0.4)',
+  },
+
+  dark: {
+    primary: 'rgb(79, 216, 235)',
+    onPrimary: 'rgb(0, 54, 61)',
+    primaryContainer: 'rgb(0, 79, 88)',
+    onPrimaryContainer: 'rgb(151, 240, 255)',
+
+    secondary: 'rgb(177, 203, 208)',
+    onSecondary: 'rgb(28, 52, 56)',
+    secondaryContainer: 'rgb(51, 75, 79)',
+    onSecondaryContainer: 'rgb(205, 231, 236)',
+
+    tertiary: 'rgb(186, 198, 234)',
+    onTertiary: 'rgb(36, 48, 77)',
+    tertiaryContainer: 'rgb(59, 70, 100)',
+    onTertiaryContainer: 'rgb(218, 226, 255)',
+
+    error: 'rgb(255, 180, 171)',
+    onError: 'rgb(105, 0, 5)',
+    errorContainer: 'rgb(147, 0, 10)',
+    onErrorContainer: 'rgb(255, 180, 171)',
+
+    background: 'rgb(25, 28, 29)',
+    onBackground: 'rgb(225, 227, 227)',
+
+    surface: 'rgb(25, 28, 29)',
+    onSurface: 'rgb(225, 227, 227)',
+    surfaceVariant: 'rgb(63, 72, 74)',
+    onSurfaceVariant: 'rgb(191, 200, 202)',
+
+    outline: 'rgb(137, 146, 148)',
+    outlineVariant: 'rgb(63, 72, 74)',
+
+    shadow: 'rgb(0, 0, 0)',
+    scrim: 'rgb(0, 0, 0)',
 
-export const colors = {
-  white: '#FFFFFF',
-  black: '#000000',
+    inverseSurface: 'rgb(225, 227, 227)',
+    inverseOnSurface: 'rgb(46, 49, 50)',
+    inversePrimary: 'rgb(0, 104, 116)',
 
-  text: palette.neutral800,
-  textDim: palette.neutral600,
-  border: palette.neutral400,
-  separator: palette.neutral300,
-  background: palette.neutral200,
+    elevation: {
+      level0: 'transparent',
+      level1: 'rgb(28, 37, 39)',
+      level2: 'rgb(29, 43, 46)',
+      level3: 'rgb(31, 49, 52)',
+      level4: 'rgb(32, 51, 54)',
+      level5: 'rgb(33, 54, 58)',
+    },
 
-  primary: palette.blueGray800,
-  secondary: palette.blueGray200,
+    surfaceDisabled: 'rgba(225, 227, 227, 0.12)',
+    onSurfaceDisabled: 'rgba(225, 227, 227, 0.38)',
 
-  error: palette.error500,
-  errorBackground: palette.error100,
+    backdrop: 'rgba(41, 50, 52, 0.4)',
+  },
 };
 
+export const colors = scheme.light;
 export type Colors = typeof colors;

src/components/BrandConfigProvider/theme/base/index.ts

@@ -1,2 +1,4 @@
 export * from './colors';
 export * from './spacing';
+
+export const roundness = 4;