HH Colors

gistfile1.ts

export enum Color {
  YELLOW = '#E2FF03', // primary default
  YELLOW_50 = '#778810', // primary---------- ???? disabled maybe? can't find it anywhere in the Branded design, but indeed, this is the background color used for inactive buttons in the app
  WHITE = '#FFFFFF', // white
  DEEP_BLUE = '#0C111E', // secondary_100
  DEEP_BLUE_90 = '#282D39', // secondary_90
  DEEP_BLUE_80 = '#3E414A', // secondary_80
  DEEP_BLUE_70 = '#565861', // secondary_70
  DEEP_BLUE_60 = '#6E7077', // secondary_60
  DEEP_BLUE_50 = '#86888E', // secondary_50
  DEEP_BLUE_40 = '#9EA0A4', // secondary_40
  DEEP_BLUE_30 = '#B6B8BC', // secondary_30
  DEEP_BLUE_20 = '#CECFD2', // secondary_20
  DEEP_BLUE_10 = '#CECFD2', // secondary_10
  RED = '#F35726', // contextual error
  RED_70 = '#EFA9A6', // contextual error_70
  GREEN_70 = '#B8F1D1', // contextual success
  OASE_140 = '#75BFA6', // decorative - this is not used anywhere in the app -- see OASE below


  // Black is used for gradients in onboarding and booking overlays - I THINK WE CAN leave it as it is.
  // Black is also used in the DateModal for text - I will test to see if this works with DEEP_BLUE
  BLACK = '#000000',
  BLACK_75 = '#00000075',
  BLACK_90 = '#00000090',
  TRANSPARENT = 'rgba(0,0,0,0)', // transparent

  // This is used for the date modal - borderBottomColor header
  GREY = '#4E4E4E',


  SKY_BLUE = '#ADC9DF', // used in the UPSELL DETAILS - upsell notice background

  // OASE used in AmenitiesList - actioncardTitle - text color
  // OASE - used in MyStay - actioncardTitle - text color
  OASE = '#9AAFA8',

  // OASE_130 - used in Toast - text color - SUCCESS and INFO
  OASE_130 = '#40544E',
}

export const ONBOARDING_GRADIENT_COLORS = {
  // NOT USED ANYMORE
  colors: [Color.TRANSPARENT, Color.BLACK_75, Color.BLACK],
  locations: [0, 0.5, 1],
};

export const BOOKING_GRADIENT_COLORS = {
  // DON'T ALLOW CUSTOMIZING THIS
  colors: [Color.TRANSPARENT, Color.BLACK_75, Color.BLACK_90],
  locations: [0, 0.5, 1],
};

export const HORIZONTAL_GRADIENT = {
  // THIS IS THE DIRECTION OF THE GRADIENT
  start: {x: 0, y: 0},
  end: {x: 1, y: 0},
};

export const AMENITIES_GRADIENT_COLORS = {
  ...HORIZONTAL_GRADIENT,
  colors: ['#282D39', '#30433D'], // gradientB1, gradientB2
};

export const CARDS_GRADIENT_COLORS = [
  ['#282D39', '#405486'], // gradientA1, gradientA2
  ['#282D39', '#30433D'], // gradientB1, gradientB2
];