@tactics/toddle-styleguide 0.0.1

package/src/theme/font/index.ts

@@ -0,0 +1,4 @@
+import {Font} from './font';
+import {LoadFonts} from './load-fonts';
+
+export {Font, LoadFonts};

package/src/theme/font/load-fonts.ts

@@ -0,0 +1,10 @@
+import {useFonts} from 'expo-font';
+
+export function LoadFonts() {
+  return useFonts({
+    Montserrat: require('../../../assets/fonts/montserrat/regular.ttf'),
+    MontserratBold: require('../../../assets/fonts/montserrat/bold.ttf'),
+    SourceSansPro: require('../../../assets/fonts/source-sans-pro/regular.ttf'),
+    SourceSansProBold: require('../../../assets/fonts/source-sans-pro/bold.ttf'),
+  });
+}

package/src/theme/provider/index.ts

@@ -0,0 +1,4 @@
+import {ParentTheme} from './parent.theme';
+import {StaffMemberTheme} from './staff-member.theme';
+
+export {ParentTheme, StaffMemberTheme};

package/src/theme/provider/parent.theme.ts

@@ -0,0 +1,45 @@
+import {colors} from '@tactics/kinderopvang-branding/src/colors';
+
+export const ParentTheme = {
+  colors: {
+    gradient: [colors.secondary[2], colors.tertiary[9], colors.secondary[5]],
+    main: {
+      9: colors.primary[9],
+      8: colors.primary[8],
+      7: colors.primary[7],
+      6: colors.primary[6],
+      5: colors.primary[5],
+      4: colors.primary[4],
+      3: colors.primary[3],
+      2: colors.primary[2],
+      1: colors.primary[1],
+      0: colors.primary[0],
+    },
+    ui: {
+      black: colors.ui.black,
+      white: colors.ui.white,
+      xlightgrey: colors.ui.xlightgrey,
+      lightgrey: colors.ui.lightgrey,
+      grey: colors.ui.grey,
+      darkgrey: colors.ui.darkgrey,
+      success: {
+        xlight: colors.ui.success.xlight,
+        light: colors.ui.success.light,
+        default: colors.ui.success.default,
+        dark: colors.ui.success.dark,
+      },
+      warning: {
+        xlight: colors.ui.warning.xlight,
+        light: colors.ui.warning.light,
+        default: colors.ui.warning.default,
+        dark: colors.ui.warning.dark,
+      },
+      error: {
+        xlight: colors.ui.error.xlight,
+        light: colors.ui.error.light,
+        default: colors.ui.error.default,
+        dark: colors.ui.error.dark,
+      },
+    },
+  },
+};

package/src/theme/provider/staff-member.theme.ts

@@ -0,0 +1,45 @@
+import {colors} from '@tactics/kinderopvang-branding/src/colors';
+
+export const StaffMemberTheme = {
+  colors: {
+    gradient: [colors.secondary[2], colors.secondary[5], colors.tertiary[4]],
+    main: {
+      9: colors.secondary[9],
+      8: colors.secondary[8],
+      7: colors.secondary[7],
+      6: colors.secondary[6],
+      5: colors.secondary[5],
+      4: colors.secondary[4],
+      3: colors.secondary[3],
+      2: colors.secondary[2],
+      1: colors.secondary[1],
+      0: colors.secondary[0],
+    },
+    ui: {
+      black: colors.ui.black,
+      white: colors.ui.white,
+      xlightgrey: colors.ui.xlightgrey,
+      lightgrey: colors.ui.lightgrey,
+      grey: colors.ui.grey,
+      darkgrey: colors.ui.darkgrey,
+      success: {
+        xlight: colors.ui.success.xlight,
+        light: colors.ui.success.light,
+        default: colors.ui.success.default,
+        dark: colors.ui.success.dark,
+      },
+      warning: {
+        xlight: colors.ui.warning.xlight,
+        light: colors.ui.warning.light,
+        default: colors.ui.warning.default,
+        dark: colors.ui.warning.dark,
+      },
+      error: {
+        xlight: colors.ui.error.xlight,
+        light: colors.ui.error.light,
+        default: colors.ui.error.default,
+        dark: colors.ui.error.dark,
+      },
+    },
+  },
+};

package/src/theme/scale/index.ts

@@ -0,0 +1,14 @@
+const base = 16;
+
+export const Scale = {
+  xxxs: base * 0.125,
+  xxs: base * 0.25,
+  xs: base * 0.5,
+  s: base * 0.75,
+  m: base,
+  l: base * 1.5,
+  xl: base * 2,
+  xxl: base * 3,
+  xxxl: base * 4,
+  xxxxl: base * 6,
+};

package/src/types/bubble-alignment.enum.ts

@@ -0,0 +1,4 @@
+export enum BubbleAlignment {
+  SENT = 'SENT',
+  RECEIVE = 'RECEIVE',
+}

package/src/types/icontype.type.ts

@@ -0,0 +1,3 @@
+export type IconType = {
+  color?: any;
+};

package/src/types/keyboard-types.enum.ts

@@ -0,0 +1,9 @@
+export enum KeyBoardTypes {
+  DEFAULT = 'default',
+  NUMBER_PAD = 'number-pad',
+  DECIMAL_PAD = 'decimal-pad',
+  NUMERIC = 'numeric',
+  EMAIL_ADDRESS = 'email-address',
+  PHONE_PAD = 'phone-pad',
+  URL = 'url',
+}

package/src/types/size.enum.ts

@@ -0,0 +1,5 @@
+export enum Size {
+  SMALL = 'SMALL',
+  MEDIUM = 'MEDIUM',
+  LARGE = 'LARGE',
+}

package/src/types/visual-state.enum.ts

@@ -0,0 +1,6 @@
+export enum VisualState {
+  DEFAULT = 'DEFAULT',
+  SUCCESS = 'SUCCESS',
+  WARNING = 'WARNING',
+  ERROR = 'ERROR',
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  },
+  "typeRoots": ["./types"]
+}