@proximus/lavender-styling-native 0.1.0-alpha.0

package/src/colors.ts

@@ -0,0 +1,289 @@
+export const Colors = {
+  aquaBlue: 'rgb(10, 216, 220)',
+  barbiePink: 'rgb(255, 65, 140)',
+  black: 'rgb(51, 51, 51)',
+  blackTwo: 'rgb(0, 0, 0)',
+  blackTwo80: 'rgba(0, 0, 0, 0.8)',
+  blueberry: 'rgb(92, 45, 145)',
+  purple: 'rgb(92, 45, 145)',
+  blueberryLight: 'rgb(141, 108, 178)',
+  blueberryTransparent: 'rgba(92, 45, 145, 0.3)',
+  brightSkyBlue: 'rgb(0, 188, 238)',
+  cerulean: 'rgb(0, 115, 207)',
+  cloudyBlue: 'rgb(193, 193, 195)',
+  cobalt: 'rgb(62, 33, 128)',
+  darkPurple: 'rgb(30, 6, 59)',
+  frogGreen: 'rgb(108, 208, 9)',
+  grey: 'rgb(112, 112, 112)', // named 707070 on zeplin's styleguide
+  indigo: 'rgb(75, 12, 146)',
+  marigold: 'rgb(255, 202, 0)',
+  nastyGreen: 'rgb(116, 187, 57)',
+  freshGreen: 'rgb(125,210,81)',
+  pumpkinOrange: 'rgb(252, 127, 4)',
+  red: 'rgb(237, 0, 0)',
+  redTwo: 'rgb(255, 0, 0)',
+  redPink: 'rgb(238, 46, 93)',
+  sandy: 'rgb(234, 200, 131)',
+  topaz: 'rgb(21, 195, 211)',
+  unnamedBlue: 'rgb(70, 70, 246)', // Used in zeplin but absent from styleguide
+  unnamedGreen: 'rgb(125, 210, 81)', // Used in zeplin but absent from styleguide
+  unnamedOrange: 'rgb(255, 172, 45)', // Used in zeplin but absent from styleguide
+  veryLightPink: 'rgb(242, 242, 242)',
+  veryLightPinkTwo: 'rgb(221, 221, 221)',
+  warmBlue: 'rgb(88, 86, 214)',
+  white: 'rgb(246, 246, 246)',
+  whitePure: 'rgb(255, 255, 255)', // Also called white in zeplin
+  whitePureTransparent: 'rgba(255, 255, 255, 0.5)',
+  unnamedGrey: 'rgb(237, 237, 237)', // Used in zeplin but absent from styleguide
+  greyLight: 'rgb(233, 233, 233)', // unnamed in zeplin
+  greyLightTwo: 'rgb(146, 146, 146)', // unnamed in zeplin
+  whiteThree: 'rgb(245, 245, 245)',
+  green: 'rgb(0, 128, 0)', // unnamed in zeplin
+  blackThree: 'rgb(58,58,58)',
+  purpleLight: 'rgb(205,191,221)', // unnamed in zeplin
+  greyTwo: 'rgb(157, 157, 157)', // unnamed in zeplin
+  // New Theme colors
+  brand: {
+    purple: 'rgb(92, 45, 145)',
+    purple70: 'rgb(141, 108, 145)',
+    red: 'rgba(238, 46, 93, 1)',
+    pink: 'rgba(255, 65, 140, 1)',
+    orange: 'rgba(243, 146, 0, 1)',
+    yellow: 'rgba(255, 202, 0, 1)',
+    green: 'rgba(129, 199, 71, 1)',
+    turquoise: 'rgba(102, 210, 204, 1)',
+    blue: 'rgba(0, 188, 238, 1)',
+    darkBlue: 'rgba(0, 115, 207, 1)',
+    scarletRed: '#E61F13',
+  },
+  // Shades of grey
+  shadesOfGrey: {
+    grey1: 'rgba(249, 249, 249, 1)',
+    grey2: 'rgba(243, 243, 243, 1)',
+    grey3: 'rgba(236, 236, 237, 1)',
+    grey4: 'rgba(230, 230, 231, 1)',
+    grey5: 'rgba(224, 224, 225, 1)',
+    grey6: 'rgba(218, 218, 219, 1)',
+    grey7: 'rgba(211, 211, 213, 1)',
+    grey8: 'rgba(205, 205, 207, 1)',
+    grey9: 'rgba(199, 199, 201, 1)',
+    grey: 'rgba(193, 193, 195, 1)',
+    black: 'rgba(10, 10, 10, 1)',
+    black4: 'rgba(125, 125, 125, 1)',
+    black5: 'rgba(99, 99, 99, 1)',
+    black6: 'rgba(85, 85, 85, 1)',
+    black7: 'rgba(70, 70, 70, 1)',
+    black8: 'rgba(58, 58, 58, 1)',
+    black9: 'rgba(37, 37, 37, 1)',
+    whiteOpacity8: 'rgba(255, 255, 255, 0.08)',
+    whiteOpacity16: 'rgba(255, 255, 255, 0.16)',
+    blackOpacity6: 'rgba(10, 10, 10, 0.6)',
+    black9Opacity6: 'rgba(37, 37, 37, 0.6)',
+    white: 'rgba(255, 255, 255, 1)',
+  },
+  status: {
+    validGreenPos: 'rgba(0, 128, 0, 1)', // TODO: To be deleted
+    validGreenNeg: 'rgba(41, 219, 41, 1)',
+    warningOrangePos: 'rgba(255, 137, 0, 1)', // TODO: To be deleted
+    warningRedPos: 'rgba(179, 0, 0, 1)', // TODO: To be deleted
+    success: 'rgb(0,128,0)',
+    order: 'rgba(42, 209, 42, 1)',
+    warning: 'rgba(255, 137, 0, 1)',
+    warningText: 'rgba(170, 93, 0, 1)',
+    error: 'rgba(179, 0, 0, 1)',
+    toastError: 'rgba(242, 38, 19, 1)',
+    scarletOrderColor: '#008000',
+  },
+  // v7 colors
+  v7: {
+    promo: 'rgba(222, 0, 55, 1)',
+    epicPromo: 'rgba(255, 67, 113, 1)',
+    pink: 'rgba(255, 67, 113, 1)',
+    status: {
+      info: 'rgba(92, 45, 145, 1)',
+      success: '#008000',
+      epicSuccess: '#2AD12A',
+      error: '#B30000',
+      epicError: '#F22613',
+      warning: '#A55D00',
+      epicWarning: '#F5AB35',
+    },
+    shadesOfPurple: {
+      purple1: 'rgba(92, 45, 145, 0.16)',
+      purple2: 'rgba(92, 45, 145, 1)',
+      purple3: 'rgba(125, 87, 167, 1)',
+    },
+    shadesOfRed: {
+      red1: '#E61F13',
+      red2: '#EC574E',
+      red3: 'rgba(230, 31, 19, 0.16)',
+    },
+    shadesOfGrey: {
+      black0Opacity4: 'rgba(0, 0, 0, 0.04)',
+      black0Opacity12: 'rgba(0, 0, 0, 0.12)',
+      blackOpacity2: 'rgba(0, 0, 0, 0.2)',
+      blackOpacity44: 'rgba(0, 0, 0, 0.44)',
+      black0Opacity8: 'rgba(0,0,0,0.08)',
+      black0Opacity56: 'rgba(0, 0, 0, 0.56)',
+      black0Opacity16: 'rgba(0, 0, 0, 0.16)',
+      whiteOpacity8: 'rgba(255, 255, 255, 0.08)',
+      whiteOpacity12: 'rgba(255, 255, 255, 0.12)',
+      whiteOpacity16: 'rgba(255, 255, 255, 0.16)',
+      whiteOpacity4: 'rgba(255, 255, 255, 0.4)',
+      whiteOpacity52: 'rgba(255, 255, 255, 0.52)',
+      whiteOpacity64: 'rgba(255,255,255,0.64)',
+      whiteOpacity24: 'rgba(255, 255, 255, 0.24)',
+    },
+  },
+  // v8 is already used for unknown reason... so we use v8_1
+  v8_1: {
+    shadesOfPurple: {
+      purple: '#5C2D91',
+      purpleLight: '#DED5E9',
+    },
+    shadesOfGrey: {
+      dark4: 'rgba(0, 0, 0, 0.04)',
+      dark40: 'rgba(0, 0, 0, 0.4)',
+      dark120: 'rgba(0, 0, 0, 0.12)',
+      dark160: 'rgba(0, 0, 0, 0.16)',
+      dark280: 'rgba(0, 0, 0, 0.28)',
+      dark320: 'rgba(0, 0, 0, 0.32)',
+    },
+    text: {
+      black: '#252525',
+      details: '#707070',
+    },
+    success: '#008000',
+    strokeBlack: '#707070',
+    white: '#FFFFFF',
+    black: '#252525',
+  },
+  v8: {
+    shadesOfPurple: {
+      purple: '#5C2D91',
+      purple1: '#EEEAF4',
+      purple2: '#DED5E9',
+      purple3: '#CEC0DE',
+      purple4: '#BEABD3',
+      purple5: '#AD96C8',
+      purple6: '#9D81BD',
+      purple7: '#8D6CB2',
+      purple8: '#7D57A7',
+      purple9: '#6C429C',
+    },
+    shadesOfGrey: {
+      black: '#000000',
+      black6: '#7D7D7D',
+      black7: '#636363',
+      black8: '#464646',
+      black9: '#252525',
+      grey: '#C1C1C3',
+      grey1: '#F9F9F9',
+      grey2: '#F3F3F3',
+      grey4: '#E6E6E7',
+      grey6: '#DADADB',
+    },
+    res: {
+      red: '#EE2E5D',
+      magenta: '#FF418C',
+      orange: '#F39200',
+      blue: '#00BCEE',
+      turquoise: '#66D2CC',
+      green: '#81C747',
+      red2: '#FCD5DF',
+      red1: '#FDEAEE',
+      green1: '#F2F9EC',
+      green2: '#E6F4DA',
+      green4: '#CDE9B5',
+    },
+    ebu: {
+      blue: '#00BCEE',
+      blue1: '#E5F8FD',
+      blue2: '#CCF2FC',
+      blue4: '#99E4F8',
+      turquoise: '#66D2CC',
+      turquoise1: '#EFFAFA',
+      turquoise2: '#E0F6F5',
+      turquoise4: '#C2EDEB',
+    },
+    promo: {
+      backgroundMypx: '#DE2A56',
+      textMypx: '#DE0037',
+      backgroundEpic: '#DE2A56',
+      textEpic: '#FF4371',
+    },
+    status: {
+      success: '#008000',
+      epicSuccess: '#2AD12A',
+      error: '#B30000',
+      epicError: '#F22613',
+      warning: '#F58221',
+      epicWarning: '#F5AB35',
+      warningText: '#A55D00',
+      epicWarningText: '#F5AB35',
+    },
+    //TODO : Need to clean up epic styles once all the epic references are removed from rn-proximus
+    theme: {
+      mypxBackground: 'rgba(255, 255, 255, 1)',
+      mypxBackground1: 'rgba(0, 0, 0, 0.04)',
+      mypxBackground2: 'rgba(0, 0, 0, 0.08)',
+      mypxBackground3: 'rgba(0, 0, 0, 0.12)',
+      mypxIconBackground: 'rgba(92, 45, 145, 0.16)',
+      mypxIconColor: 'rgba(92, 45, 145, 1.0)',
+      mypxTextDetails: 'rgba(0, 0, 0, 0.56)',
+      mypxTransparentBlurBackground: 'rgba(70, 70, 70, 0.8)',
+      epicBackground: 'rgba(0, 0, 0, 1)',
+      epicBackgroundDarkGrey3: 'rgba(54, 54, 54, 1)',
+      epicBackground1: 'rgba(255, 255, 255, 0.08)',
+      epicBackground2: 'rgba(255, 255, 255, 0.12)',
+      epicBackground3: 'rgba(255, 255, 255, 0.16)',
+      epicIconBackground: 'rgba(255, 255, 255, 0.24)',
+      epicIconColor: 'rgba(255, 255, 255, 1.0)',
+      epicTextDetails: 'rgba(255, 255, 255, 0.64)',
+      epicTransparentBlurBackground: 'rgba(255, 255, 255, 0.8)',
+      scarletIconBackground: 'rgba(230, 31, 19, 0.16)',
+      scarletIconColor: '#E61F13',
+      scarletTransparentBlurBackground: 'rgba(70, 70, 70, 0.8)',
+      scarletTextDetails: 'rgba(0, 0, 0, 0.56)',
+      scarletBackground1: 'rgba(0, 0, 0, 0.04)',
+      scarletBackground2: 'rgba(0, 0, 0, 0.08)',
+      scarletBackground3: 'rgba(0, 0, 0, 0.12)',
+    },
+    yellow: '#FFCA00',
+    almond: '#EAC883',
+    white: '#FFFFFF',
+  },
+};
+
+export const ScarletColors = {
+  ...Colors,
+  white: 'rgba(255, 255, 255, 1)',
+  shadesOfGrey: {
+    ...Colors.shadesOfGrey,
+    black5: 'rgba(215, 215, 215, 1)',
+    black6: 'rgba(125, 125, 125, 1)',
+    black7: 'rgba(99, 99, 99, 1)',
+    black8: 'rgba(70, 70, 70, 1)',
+    black85: 'rgba(58, 58, 58, 1)',
+  },
+  status: {
+    ...Colors.status,
+    validGreenNeg: 'rgba(41, 219, 41, 1)', // TODO: To be deleted
+    warningOrangeNeg: 'rgba(255, 137, 0, 1)', // TODO: To be deleted
+    warningRedNeg: 'rgba(179, 0, 0, 1)', // TODO: To be deleted
+    success: 'rgba(41, 219, 41, 1)',
+    warning: 'rgba(255, 137, 0, 1)',
+    warningText: 'rgba(245, 171, 53, 1)',
+    error: 'rgba(242, 38, 19, 1)',
+    toastError: 'rgba(242, 38, 19, 1)',
+  },
+};
+
+export const Gradients = {
+  red: [Colors.brand.red, Colors.brand.purple],
+  magenta: [Colors.brand.pink, Colors.brand.purple],
+  orange: [Colors.brand.orange, Colors.brand.purple],
+  blue: [Colors.brand.blue, Colors.brand.purple],
+  turquoise: [Colors.brand.turquoise, Colors.brand.purple],
+  green: [Colors.brand.green, Colors.brand.purple],
+};

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './colors';
+export * from './breakpoints';
+export * from './sizes';
+export * from './ThemeContext';
+export * from './ThemeProvider';
+export * from './themes';
+export * from './AssetContainer';

package/src/sizes.ts

@@ -0,0 +1,78 @@
+import { Dimensions, Platform, StatusBar } from 'react-native';
+
+const { width, height } = Dimensions.get('window');
+
+const NavigationBarHeight = 44;
+const StatusHeight =
+  Platform.OS === 'android' ? StatusBar.currentHeight || 0 : 0;
+const DefaultContentWidth = 448;
+
+export const CommonSizes = {
+  AbsoluteBiggest: 36,
+  Big: 18,
+  Bigger: 20,
+  Biggest: 24,
+  Medium: 16,
+  Small: 14,
+  Smaller: 12,
+  Smallest: 10,
+};
+
+export const Sizes = {
+  NavigationBarHeight,
+  StatusHeight,
+  AlertPopupButton: CommonSizes.Smaller,
+  AlertPopupText: CommonSizes.Small,
+  AlertPopupTitle: CommonSizes.Bigger,
+  BubbleTitleSize: CommonSizes.Small,
+  ButtonTitleSize: CommonSizes.Bigger,
+  CardText: CommonSizes.Small,
+  CharLimitTextInput: CommonSizes.Smaller,
+  ContentMaxWidth: 468,
+  ContentWidth: Math.min(Math.min(width, height), DefaultContentWidth),
+  CounterIconTextSize: CommonSizes.Smallest,
+  HeaderHeight: StatusHeight + NavigationBarHeight,
+  HeaderSubtitleFontSize: CommonSizes.Smallest,
+  HeaderTitleFontSize: CommonSizes.Big,
+  IconSize: CommonSizes.Medium,
+  InfoViewSize: CommonSizes.Small,
+  ListHeaderAndroid: CommonSizes.Small,
+  ListHeaderIOS: CommonSizes.Big,
+  ListItemInfoSubtitle: CommonSizes.Smaller,
+  ListItemInfoTitle: CommonSizes.Medium,
+  ListItemNotificationTitle: CommonSizes.Medium,
+  ListItemSecondSubtitle: CommonSizes.Smallest,
+  ListItemSubtitle: CommonSizes.Smaller,
+  ListItemSubtitleIOS: CommonSizes.Smaller,
+  ListItemTime: CommonSizes.Smallest,
+  ListItemTitle: CommonSizes.Medium,
+  ListWithAvatarExplicitText: CommonSizes.Smallest,
+  NotificationMessage: CommonSizes.Small,
+  PromptPopupText: CommonSizes.Small,
+  PromptPopupTitle: CommonSizes.Biggest,
+  PxCompactPriceTextCurrencySize: CommonSizes.Biggest,
+  PxCompactPriceTextDigitsSize: CommonSizes.Small,
+  PxCompactPriceTextDurationSize: CommonSizes.Smaller,
+  PxCompactPriceTextUnitsSize: CommonSizes.AbsoluteBiggest,
+  PxMobilePricingPlanCardFirstLine: CommonSizes.Big,
+  PxMobilePricingPlanCardLine: CommonSizes.Small,
+  PxMobilePricingPlanCardTitle: CommonSizes.Big,
+  PxPriceButtonTextSize: CommonSizes.Small,
+  PxPriceTextSize: CommonSizes.Small,
+  PxPriceTextSizeMultiLine: CommonSizes.Smaller,
+  PxTextIconRightIconSize: CommonSizes.Biggest,
+  PxTextIconRightTextSize: CommonSizes.Small,
+  PxOptionCardIcon: CommonSizes.Biggest,
+  PxOptionCardSubtitle: CommonSizes.Small,
+  PxOptionCardTitle: CommonSizes.Small,
+  PxProgressBarText: CommonSizes.Small,
+  SmallInformativeSubtitleText: CommonSizes.Smallest,
+  SmallInformativeText: CommonSizes.Smaller,
+  TabBarIcon: CommonSizes.Biggest,
+  TextBodySize: CommonSizes.Smaller,
+  TextDisclaimerSize: CommonSizes.Smallest,
+  TextHeader2Size: CommonSizes.Biggest,
+  TextHeaderSize: CommonSizes.Big,
+  TopNotification: CommonSizes.Medium,
+  UsageCardHeight: height,
+};

package/src/themes.ts

@@ -0,0 +1,21 @@
+export enum ThemeName {
+  MYPROXIMUS = 'myproximus',
+  SCARLET = 'scarlet',
+}
+
+export enum StatusType {
+  SUCCESS = 'success',
+  ERROR = 'error',
+  WARNING = 'warning',
+  INFO = 'info',
+}
+
+export interface ITheme {
+  name: ThemeName;
+  t: (key: string) => any;
+}
+
+export interface IThemeContext {
+  theme: ITheme;
+  setTheme?: (theme: ITheme) => void;
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.npm.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src","../../lib.d.ts"],
+  "exclude": ["dist", "node_modules", "src/**/*.test.ts", "src/**/*.spec.ts"]
+}