@sleeperhq/mini-core 1.2.4 → 1.2.6

package/index.ts

@@ -1,6 +1,6 @@
 import * as Sleeper from './src/components';
 import DevServer from './src/dev_server';
 import * as Types from './src/types';
-import './src/packages';
+import {Fonts, Theme} from './src/styles';
 
-export {Sleeper, DevServer, Types};
+export {Sleeper, DevServer, Types, Fonts, Theme};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleeperhq/mini-core",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "Core library frameworks for developing Sleeper Mini Apps.",
   "main": "index.ts",
   "types": "index.d.ts",

package/src/styles/fonts.ts

@@ -0,0 +1,174 @@
+const SHARED = {
+  INTER_EXTRALIGHT: 'Inter-ExtraLight',
+  INTER_THIN: 'Inter-Thin',
+  INTER_LIGHT: 'Inter-Light',
+  INTER_REGULAR: 'Inter-Regular',
+  INTER_MEDIUM: 'Inter-Medium',
+  INTER_SEMIBOLD: 'Inter-SemiBold',
+  INTER_BOLD: 'Inter-Bold',
+  INTER_BLACK: 'Inter-Black',
+  INTER_EXTRABOLD: 'Inter-ExtraBold',
+
+  POPPINS_THIN: 'Poppins-Thin',
+  POPPINS_LIGHT: 'Poppins-Light',
+  POPPINS_REGULAR: 'Poppins-Regular',
+  POPPINS_MEDIUM: 'Poppins-Medium',
+  POPPINS_SEMIBOLD: 'Poppins-SemiBold',
+  POPPINS_BOLD: 'Poppins-Bold',
+  POPPINS_BLACK: 'Poppins-Black',
+  POPPINS_EXTRABOLD: 'Poppins-ExtraBold',
+} as const;
+
+const Fonts = {
+  THIN: 'Lato-Thin',
+  LIGHT: 'Lato-Light',
+  REGULAR: 'Lato-Regular',
+  MEDIUM: 'Lato-Medium',
+  BOLD: 'Lato-Bold',
+  HEAVY: 'Lato-Heavy',
+  BLACK: 'Lato-Black',
+
+  MULI_THIN: 'Muli-ExtraLight',
+  MULI_LIGHT: 'Muli-Light',
+  MULI_REGULAR: 'Muli-Regular',
+  MULI_MEDIUM: 'Muli-SemiBold',
+  MULI_BOLD: 'Muli-Bold',
+  MULI_BLACK: 'Muli-Black',
+  MULI_EXTRABOLD: 'Muli-ExtraBold',
+
+  OSWALD__EXTRA_LIGHT: 'Oswald-ExtraLight',
+  OSWALD_LIGHT: 'Oswald-Light',
+  OSWALD_REGULAR: 'Oswald-Regular',
+  OSWALD_MEDIUM: 'Oswald-Medium',
+  OSWALD_SEMIBOLD: 'Oswald-SemiBold',
+  OSWALD_BOLD: 'Oswald-Bold',
+
+  DRUK_SUPERITALIC: 'Druk-SuperItalic',
+  CHANEY_EXTENDED: 'Chaney-Extended',
+
+  ...SHARED,
+
+  Styles: {
+    H1: {
+      fontFamily: SHARED.POPPINS_EXTRABOLD,
+      fontSize: 32,
+      // lineHeight: 48,
+    },
+    H2: {
+      fontFamily: SHARED.POPPINS_EXTRABOLD,
+      fontSize: 28,
+      // lineHeight: 48,
+    },
+    H3: {
+      fontFamily: SHARED.POPPINS_BOLD,
+      fontSize: 24,
+      // lineHeight: 32,
+    },
+    H4: {
+      fontFamily: SHARED.POPPINS_BOLD,
+      fontSize: 20,
+      // lineHeight: 26,
+    },
+    Title: {
+      fontFamily: SHARED.POPPINS_SEMIBOLD,
+      fontSize: 18,
+      // lineHeight: 24,
+    },
+    Subhead: {
+      fontFamily: SHARED.POPPINS_SEMIBOLD,
+      fontSize: 16,
+      // lineHeight: 20,
+    },
+    Menu: {
+      fontFamily: SHARED.POPPINS_SEMIBOLD,
+      fontSize: 12,
+      // lineHeight: 16,
+      letterSpacing: 0.5,
+    },
+    ButtonLarge: {
+      fontFamily: SHARED.POPPINS_SEMIBOLD,
+      fontSize: 14,
+      // lineHeight: 16, // Cuts off the text at 14
+      letterSpacing: 1,
+    },
+    ButtonSmall: {
+      fontFamily: SHARED.POPPINS_SEMIBOLD,
+      fontSize: 12,
+      // lineHeight: 14, // Cuts off the text at 12
+      letterSpacing: 1,
+    },
+    TextCtaLarge: {
+      fontFamily: SHARED.POPPINS_SEMIBOLD,
+      fontSize: 14,
+      // lineHeight: 14,
+      letterSpacing: 1,
+    },
+    TextCtaSmall: {
+      fontFamily: SHARED.POPPINS_SEMIBOLD,
+      fontSize: 12,
+      // lineHeight: 12,
+      letterSpacing: 1,
+    },
+    Body1: {
+      fontFamily: SHARED.INTER_REGULAR,
+      fontSize: 16,
+      // lineHeight: 20,
+      letterSpacing: -0.15,
+    },
+    Body1Bold: {
+      fontFamily: SHARED.INTER_SEMIBOLD,
+      fontSize: 16,
+      // lineHeight: 20,
+      letterSpacing: -0.15,
+    },
+    Body2: {
+      fontFamily: SHARED.INTER_REGULAR,
+      fontSize: 14,
+      // lineHeight: 18,
+      letterSpacing: -0.25,
+    },
+    Body2Bold: {
+      fontFamily: SHARED.INTER_SEMIBOLD,
+      fontSize: 14,
+      // lineHeight: 18,
+      letterSpacing: -0.25,
+    },
+    Body3: {
+      fontFamily: SHARED.INTER_REGULAR,
+      fontSize: 12,
+      // lineHeight: 16,
+      letterSpacing: -0.15,
+    },
+    Body3Bold: {
+      fontFamily: SHARED.INTER_SEMIBOLD,
+      fontSize: 12,
+      // lineHeight: 16,
+      letterSpacing: -0.25,
+    },
+    Caption1: {
+      fontFamily: SHARED.INTER_REGULAR,
+      fontSize: 10,
+      // lineHeight: 12,
+      letterSpacing: -0.25,
+    },
+    Caption1Bold: {
+      fontFamily: SHARED.INTER_BOLD,
+      fontSize: 10,
+      // lineHeight: 12,
+      letterSpacing: -0.15,
+    },
+    Overline: {
+      fontFamily: SHARED.POPPINS_BOLD,
+      fontSize: 10,
+      letterSpacing: 0.25,
+    },
+    Footnote: {
+      fontFamily: SHARED.INTER_REGULAR,
+      fontSize: 9,
+      // lineHeight: 12,
+      letterSpacing: -0.25,
+    },
+  },
+} as const;
+
+export default Fonts;

package/src/styles/index.ts

@@ -0,0 +1,2 @@
+export { default as Theme } from './theme';
+export { default as Fonts } from './fonts';

package/src/styles/theme.ts

@@ -0,0 +1,69 @@
+const Theme = {
+  name: 'dark',
+
+  backgroundBase: '#030616',
+  backgroundDark: '#15182d',
+  backgroundCard: '#252942',
+  backgroundIce: '#fbfbfb',
+  backgroundWhite: '#ffffff',
+
+  primaryText: '#ffffff',
+  secondaryText: '#a3bbd3', // gray300
+
+  gray100: '#eef2f7',
+  gray200: '#d8e2ed',
+  gray300: '#a3bbd3',
+  gray400: '#606f8c',
+  gray500: '#4a5870',
+  gray600: '#344054',
+
+  aqua: '#00baff',
+  blue: '#046ae0',
+  cypress: '#019494',
+  green: '#45e8a7',
+  lavender: '#b8bfff',
+  lilac: '#bd66ff',
+  mint: '#00ceb8',
+  orange: '#ff5c00',
+  pink: '#ff7db6',
+  purple: '#6e7df5',
+  red: '#ff2b6d',
+  salmon: '#ff6086',
+  yam: '#8e66ff',
+  yellow: '#ffae58',
+  white: '#ffffff',
+  black: '#000000',
+  dark: '#022047',
+
+  gradients: {
+    // The `LinearGradient` component explicitly expects an array of color string, so casting in advance.
+    primary: ['#4ce2a7', '#00b7b3'] as string[],
+    success: ['#4ce2b8', '#07c5ff'] as string[],
+    cheer: ['#ffaa7f', '#ff3a6e'] as string[],
+    alert: ['#ffae58', '#ff4542'] as string[],
+    purple: ['#89a5fb', '#635ee4'] as string[],
+    lilac: ['#db84ff', '#9139ff'] as string[],
+    blue: ['#7cdaf9', '#5e73e4'] as string[],
+    gray: ['#e6effa', '#a3bbd3'] as string[],
+    darkgray: ['#a3bbd3', '#3a465b'] as string[],
+    background: ['#55609f', '#101c5a'] as string[],
+  },
+
+  getColorForSport(sport: string) {
+    if (sport === 'cbb') {
+      return Theme.orange;
+    }
+
+    if (sport === 'nba') {
+      return Theme.yellow;
+    }
+
+    if (sport === 'lcs' || sport === 'lol') {
+      return Theme.aqua;
+    }
+
+    return Theme.mint;
+  },
+} as const;
+
+export default Theme;

package/src/packages/index.ts

@@ -1,4 +0,0 @@
-// preload shared packages that require initialization during startup
-import 'lodash';
-import 'react-native-svg';
-import 'react-native-linear-gradient';