@kiosinc/commons-rn 0.1.7

package/src/theme/index.ts

@@ -0,0 +1,37 @@
+import { createTheme } from '@shopify/restyle';
+import { CustomLightTheme } from './theme';
+import { typescale } from './tokens';
+import type { MD3Theme } from 'react-native-paper';
+
+const units: Record<string, number> = {};
+
+new Array(1000).fill(0).forEach((_, index) => {
+  units[index + ''] = index;
+});
+
+export const generateRestyleComponentsTheme = ({
+  theme,
+}: {
+  theme: MD3Theme;
+}) => {
+  // Restyle does not support elevation color as object
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let { elevation, ...colors } = { ...theme.colors };
+  return createTheme({
+    colors: {
+      transparent: 'transparent',
+      ...colors,
+    },
+    textVariants: typescale,
+    spacing: units,
+    breakpoints: {
+      phone: 0,
+    },
+    zIndices: units,
+    borderRadii: units,
+  });
+};
+const dummyTheme = generateRestyleComponentsTheme({
+  theme: CustomLightTheme as MD3Theme,
+});
+export type ThemeType = typeof dummyTheme;

package/src/theme/theme.ts

@@ -0,0 +1,125 @@
+import color from 'color';
+import { MD3Colors, tokens, typescale } from './tokens';
+import type { MD3Theme } from 'react-native-paper';
+const { palette, opacity } = tokens.md.ref;
+
+export const CustomLightTheme = {
+  dark: false,
+  roundness: 4,
+  version: 3,
+  isV3: true,
+  colors: {
+    primary: palette.primary40,
+    primaryContainer: palette.primary90,
+    secondary: palette.secondary40,
+    secondaryContainer: palette.secondary90,
+    tertiary: palette.tertiary40,
+    tertiaryContainer: palette.tertiary90,
+    surface: palette.neutral99,
+    surfaceVariant: palette.neutralVariant90,
+    surfaceDisabled: color(palette.neutral10)
+      .alpha(opacity.level2)
+      .rgb()
+      .string(),
+    background: palette.neutral99,
+    error: palette.error40,
+    errorContainer: palette.error90,
+    onPrimary: palette.primary100,
+    onPrimaryContainer: palette.primary10,
+    onSecondary: palette.secondary100,
+    onSecondaryContainer: palette.secondary10,
+    onTertiary: palette.tertiary100,
+    onTertiaryContainer: palette.tertiary10,
+    onSurface: palette.neutral10,
+    onSurfaceVariant: palette.neutralVariant30,
+    onSurfaceDisabled: color(palette.neutral10)
+      .alpha(opacity.level4)
+      .rgb()
+      .string(),
+    onError: palette.error100,
+    onErrorContainer: palette.error10,
+    onBackground: palette.neutral10,
+    outline: palette.neutralVariant50,
+    outlineVariant: palette.neutralVariant80,
+    inverseSurface: palette.neutral20,
+    inverseOnSurface: palette.neutral95,
+    inversePrimary: palette.primary80,
+    shadow: palette.neutral0,
+    scrim: palette.neutral0,
+    backdrop: color(MD3Colors.neutralVariant20).alpha(0.4).rgb().string(),
+    elevation: {
+      level0: '#F9FAF5',
+      // Note: Color values with transparency cause RN to transfer shadows to children nodes
+      // instead of View component in Surface. Providing solid background fixes the issue.
+      // Opaque color values generated with `palette.primary99` used as background
+      level1: '#F9FAF5', // palette.primary40, alpha 0.05
+      level2: '#F9FAF5', // palette.primary40, alpha 0.08
+      level3: '#F9FAF5', // palette.primary40, alpha 0.11
+      level4: '#F9FAF5', // palette.primary40, alpha 0.12
+      level5: '#F9FAF5', // palette.primary40, alpha 0.14
+    },
+  },
+  fonts: typescale,
+  animation: {
+    scale: 1.0,
+  },
+} as MD3Theme;
+
+export const CustomDarkTheme = {
+  ...CustomLightTheme,
+  dark: true,
+  mode: 'adaptive',
+  version: 3,
+  isV3: true,
+  colors: {
+    primary: palette.primary80,
+    primaryContainer: palette.primary30,
+    secondary: palette.secondary80,
+    secondaryContainer: palette.secondary30,
+    tertiary: palette.tertiary80,
+    tertiaryContainer: palette.tertiary30,
+    surface: palette.neutral10,
+    surfaceVariant: palette.neutralVariant30,
+    surfaceDisabled: color(palette.neutral90)
+      .alpha(opacity.level2)
+      .rgb()
+      .string(),
+    background: palette.neutral10,
+    error: palette.error80,
+    errorContainer: palette.error30,
+    onPrimary: palette.primary20,
+    onPrimaryContainer: palette.primary90,
+    onSecondary: palette.secondary20,
+    onSecondaryContainer: palette.secondary90,
+    onTertiary: palette.tertiary20,
+    onTertiaryContainer: palette.tertiary90,
+    onSurface: palette.neutral90,
+    onSurfaceVariant: palette.neutralVariant80,
+    onSurfaceDisabled: color(palette.neutral90)
+      .alpha(opacity.level4)
+      .rgb()
+      .string(),
+    onError: palette.error20,
+    onErrorContainer: palette.error80,
+    onBackground: palette.neutral90,
+    outline: palette.neutralVariant60,
+    outlineVariant: palette.neutralVariant30,
+    inverseSurface: palette.neutral90,
+    inverseOnSurface: palette.neutral20,
+    inversePrimary: palette.primary40,
+    shadow: palette.neutral0,
+    scrim: palette.neutral0,
+    backdrop: color(MD3Colors.neutralVariant80).alpha(0.4).rgb().string(),
+    elevation: {
+      level0: 'transparent',
+      // Note: Color values with transparency cause RN to transfer shadows to children nodes
+      // instead of View component in Surface. Providing solid background fixes the issue.
+      // Opaque color values generated with `palette.primary80` used as background
+      level1: 'rgb(25, 28, 26)',
+      level2: 'rgb(25, 28, 26)',
+      level3: 'rgb(25, 28, 26)',
+      level4: 'rgb(25, 28, 26)',
+      level5: 'rgb(25, 28, 26)',
+    },
+  },
+} as MD3Theme;

package/src/theme/tokens.ts

@@ -0,0 +1,209 @@
+const ref = {
+  palette: {
+    primary100: 'white',
+    primary99: '#F5FFF4',
+    primary95: '#C1FFD4',
+    primary90: '#80FAB2',
+    primary80: '#63DD98',
+    primary70: '#43C17E',
+    primary60: '#1CA566',
+    primary50: '#008951',
+    primary40: '#006D40',
+    primary30: '#00522F',
+    primary20: '#00391F',
+    primary10: '#002110',
+    primary0: 'black',
+    secondary100: 'white',
+    secondary99: '#F5FFF4',
+    secondary95: '#DFF7E3',
+    secondary90: '#D1E8D5',
+    secondary80: '#B5CCBA',
+    secondary70: '#9AB19F',
+    secondary60: '#809685',
+    secondary50: '#677C6C',
+    secondary40: '#4F6354',
+    secondary30: '#374B3D',
+    secondary20: '#213528',
+    secondary10: '#0C1F14',
+    secondary0: 'black',
+    tertiary100: 'white',
+    tertiary99: '#F8FDFF',
+    tertiary95: '#DAF5FF',
+    tertiary90: '#BEE9F8',
+    tertiary80: '#A3CDDB',
+    tertiary70: '#88B2BF',
+    tertiary60: '#6E97A4',
+    tertiary50: '#547D8A',
+    tertiary40: '#3B6470',
+    tertiary30: '#214C58',
+    tertiary20: '#033641',
+    tertiary10: '#001F27',
+    tertiary0: 'black',
+    neutral100: 'white',
+    neutral99: '#FBFDF8',
+    neutral95: '#F0F1EC',
+    neutral90: '#E1E3DE',
+    neutral80: '#C5C7C3',
+    neutral70: '#AAACA8',
+    neutral60: '#8F918D',
+    neutral50: '#757874',
+    neutral40: '#5C5F5C',
+    neutral30: '#454744',
+    neutral20: '#454744',
+    neutral10: '#191C1A',
+    neutral0: 'black',
+    neutralVariant100: 'white',
+    neutralVariant99: '#F6FFF5',
+    neutralVariant95: '#EBF3E9',
+    neutralVariant90: '#DCE5DB',
+    neutralVariant80: '#C0C9C0',
+    neutralVariant70: '#A5ADA5',
+    neutralVariant60: '#8A938B',
+    neutralVariant50: '#717971',
+    neutralVariant40: '#586059',
+    neutralVariant30: '#414942',
+    neutralVariant20: '#2A322C',
+    neutralVariant10: '#161D18',
+    neutralVariant0: 'black',
+    error100: 'white',
+    error99: '#FFFBFF',
+    error95: '#FFEDEA',
+    error90: '#FFDAD6',
+    error80: '#FFB4AB',
+    error70: '#FF897D',
+    error60: '#FF5449',
+    error50: '#DE3730',
+    error40: '#BA1A1A',
+    error30: '#93000A',
+    error20: '#690005',
+    error10: '#410002',
+    error0: 'black',
+  },
+
+  typeface: {
+    brandRegular: 'Avenir-Regular',
+    plainMedium: 'Avenir-Medium',
+  },
+
+  opacity: {
+    level1: 0.08,
+    level2: 0.12,
+    level3: 0.16,
+    level4: 0.38,
+  },
+};
+
+const regularType = {
+  fontFamily: ref.typeface.brandRegular,
+  letterSpacing: 0,
+};
+
+const mediumType = {
+  fontFamily: ref.typeface.plainMedium,
+  letterSpacing: 0.15,
+};
+
+export const typescale = {
+  displayLarge: {
+    ...regularType,
+    lineHeight: 64,
+    fontSize: 57,
+  },
+  displayMedium: {
+    ...regularType,
+    lineHeight: 52,
+    fontSize: 45,
+  },
+  displaySmall: {
+    ...regularType,
+    lineHeight: 44,
+    fontSize: 36,
+  },
+
+  headlineLarge: {
+    ...regularType,
+    lineHeight: 40,
+    fontSize: 32,
+  },
+  headlineMedium: {
+    ...regularType,
+    lineHeight: 36,
+    fontSize: 28,
+  },
+  headlineSmall: {
+    ...regularType,
+    lineHeight: 32,
+    fontSize: 24,
+  },
+
+  titleLarge: {
+    ...regularType,
+    lineHeight: 28,
+    fontSize: 22,
+  },
+  titleMedium: {
+    ...mediumType,
+    letterSpacing: 0.15,
+    lineHeight: 24,
+    fontSize: 16,
+  },
+  titleSmall: {
+    ...mediumType,
+    letterSpacing: 0.1,
+    lineHeight: 20,
+    fontSize: 14,
+  },
+
+  labelLarge: {
+    ...mediumType,
+    letterSpacing: 0.1,
+    lineHeight: 20,
+    fontSize: 14,
+  },
+  labelMedium: {
+    ...mediumType,
+    letterSpacing: 0.5,
+    lineHeight: 16,
+    fontSize: 12,
+  },
+  labelSmall: {
+    ...mediumType,
+    letterSpacing: 0.5,
+    lineHeight: 16,
+    fontSize: 11,
+  },
+
+  bodyLarge: {
+    ...regularType,
+    letterSpacing: 0.5,
+    lineHeight: 24,
+    fontSize: 16,
+  },
+  bodyMedium: {
+    ...regularType,
+    letterSpacing: 0.25,
+    lineHeight: 20,
+    fontSize: 14,
+  },
+  bodySmall: {
+    ...regularType,
+    letterSpacing: 0.4,
+    lineHeight: 16,
+    fontSize: 12,
+  },
+
+  default: {
+    ...regularType,
+  },
+};
+
+export const tokens = {
+  md: {
+    ref,
+    sys: {
+      typescale,
+    },
+  },
+};
+
+export const MD3Colors = ref.palette;

package/src/types/index.d.ts

@@ -0,0 +1 @@
+type RootStackType = any;

package/src/types/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default content;
+}