/*
 * Configuration
 *
 * Central configuration for the 'ui-rs-core' module. Configuration variables are
 * set within the '$ui-rs-core' namespace and are avaiable in projects including
 * this module.
 */

@import './brand.import';

$ui-rs-core = {
	types: {},
  colors: {},
	themes: {
		light: {},
		dark: {}
	},
	inputs: {},
	buttons: {},
	iconButtons: {},
  sliders: {}
};

/*
 * Default type setup
 */

 /* set variables in function to keep global namespace clean */

setFontConfig() {
	$fontNormal = 'Raleway', sans-serif
	$fontHeadings = 'Electrolize', sans-serif
	$fontCode = 'Source Code Pro', monospace

  /* NOTE: It's necessary to use e.g. the $fontNormal variable here. Defining
   * multiple fonts directly in here yields a stylus compiler error.
   */
	$fonts = {
     normal: $fontNormal,
     headings: $fontHeadings,
     code: $fontCode
	}

	$ui-rs-core.types.fonts = $fonts;
}
setFontConfig();

setTypeConfig() {
  $defaultFontSize = 1.25rem;
  $defaultButtonInputFontSize = 1rem;

  $ui-rs-core.types.settings = {
    mobilePortrait: {
      h1: { font-family: $fontHeadings, font-size:   2rem, line-height: 1.2, margin-top:   0.1em, margin-bottom:    0.1em, font-weight: 400, text-transform: uppercase },
      h2: { font-family: $fontHeadings, font-size: 1.4rem, line-height: 1.5, margin-top: 1.25rem, margin-bottom: 0.625rem, font-weight: 400, text-transform: uppercase },
      h3: { font-family: $fontHeadings, font-size: 1.4rem, line-height: 1.5, margin-top:       0, margin-bottom: 0.625rem, font-weight: 400, text-transform: uppercase },
      h4: { font-family: $fontHeadings, font-size:   1rem, line-height: 1.5, margin-top:   0.7em, margin-bottom:    0.7em, font-weight: 400, text-transform: uppercase, border-bottom: 1px solid #424242, text-align: center },
      h5: { font-family: $fontHeadings, font-size:   0.9rem, line-height:   1, margin-top:  0.75em, margin-bottom:   0.75em, font-weight: 400, text-transform: uppercase },
      p:  { font-family: $fontNormal,   font-size: $defaultFontSize, line-height: 1.875rem, font-weight: 200 }
      a:  { font-family: $fontNormal,   font-size: $defaultFontSize, line-height: 1.875rem, font-weight: 200 }
    },
    tablet: {
      h1: { font-family: $fontHeadings, font-size:   3.8rem, line-height: 1.2, margin-top:   0.1em, margin-bottom:    0.1em, font-weight: 400, text-transform: uppercase },
      h2: { font-family: $fontHeadings, font-size: 2.375rem, line-height: 1.5, margin-top: 1.25rem, margin-bottom: 0.625rem, font-weight: 400, text-transform: uppercase },
      h3: { font-family: $fontHeadings, font-size: 1.875rem, line-height: 2.75rem, margin-top:  0, margin-bottom:  0.625rem, font-weight: 400, text-transform: uppercase },
      h4: { font-family: $fontHeadings, font-size:     1rem, line-height: 1.5, margin-top:   0.7em, margin-bottom:    0.7em, font-weight: 400, text-transform: uppercase, border-bottom: 1px solid #424242 }
      h5: { font-family: $fontHeadings, font-size:   0.9rem, line-height:   1, margin-top:  0.75em, margin-bottom:   0.75em, font-weight: 400, text-transform: uppercase },
      p:  { font-family: $fontNormal,   font-size:   $defaultFontSize, line-height: 1.875rem, font-weight: 200 }
      a:  { font-family: $fontNormal,   font-size:   $defaultFontSize, line-height: 1.875rem, font-weight: 200 }
    },
    fontCode: {
      padding: 0.2em,
      radius: 3px
    }
    defaultFontSize: $defaultFontSize,
    defaultButtonInputFontSize: $defaultButtonInputFontSize,
  }
}
setTypeConfig();

/*
 * Default color setup
 */

 /* set variables in function to keep global namespace clean */
setColorConfig() {
	/* export brand colors */
	$ui-rs-core.colors = {
		white: $brandWhite,
		black: $brandBlack,
		red: $brandRed,
		grey: $brandGrey
	}

	/* light theme: */
	$ui-rs-core.themes.light = {
		text: $brandBlack,
		bgBody: $brandWhite,
		link: $brandBlack,
		hover: $brandRed,
		pressed: #6A0000,
		visited: $brandBlack,
		selection: $brandRed,
		bgCode: #f7f7f7,
		colorCode: $brandBlack,
		colourHero: white
	}

	/* dark theme: */
	$ui-rs-core.themes.dark = {
		text: $brandWhite,
		bgBody: $brandBlack,
		link: $brandWhite,
		hover: $brandRed,
		pressed: white,
		visited: $brandWhite,
		selection: $brandRed,
		bgCode: #f7f7f7,
		colorCode: $brandBlack,
		colourHero: white
	}
}
setColorConfig();

/*
 * Default input field setup
 */

setInputConfig() {
	$ui-rs-core.inputs = {
		defaultFontSize: $ui-rs-core.types.settings.defaultButtonInputFontSize,
		minHeight: 2.75em,
		paddingTop: 0.5em,
		paddingBottom: 0.5em,
		paddingLeft: 0.5em,
		paddingRight: 0.5em,
    borderColor: #d8d8d8
	}
}
setInputConfig();

/*
 * Default button setup
 */

setButtonConfig() {
  $ui-rs-core.buttons.light = {
    fontFamily: $ui-rs-core.types.fonts.normal,
    defaultFontSize: $ui-rs-core.types.settings.defaultButtonInputFontSize,
    style: {
      default: {
        paddingLeft: 1.9375em,
        paddingRight: 1.9375em,
        paddingTop: 0.75em,
        paddingBottom: 0.75em,
      },
      small: {
        paddingLeft: 0.5em,
        paddingRight: 0.5em,
        paddingTop: 0.5em,
        paddingBottom: 0.5em
      }
    },
    default: {
      color: {
        default: #E11010,
        border: #E11010,
        hover: #fff,
        pressed: #fff,
        disabled: #7F7F7F,
      },
      background: {
        default: transparent,
        hover: #E11010,
        pressed: #6A0000,
        disabled: #CACACA
      }
    },
    red: {
      color: {
        default: #E11010,
        border: #E11010,
        hover: #fff,
        pressed: #fff,
        disabled: #7F7F7F
      },
      background: {
        default: transparent,
        hover: #E11010,
        pressed: #6A0000,
        disabled: #CACACA
      }
    },
    green: {
      color: {
        default: #0AB93A,
        border: #0AB93A,
        hover: #fff,
        pressed: #fff,
        disabled: #7F7F7F
      },
      background: {
        default: transparent,
        hover: #0AB93A,
        pressed: #087927,
        disabled: #CACACA
      }
    },
    blue: {
      color: {
        default: #1671F4,
        border: #1671F4,
        hover: #fff,
        pressed: #fff,
        disabled: #7F7F7F
      },
      background: {
        default: transparent,
        hover: #1671f4,
        pressed: #0B49A2,
        disabled: #CACACA
      }
    },
    black: {
      color: {
        default: #777,
        border: #777,
        hover: #fff,
        pressed: #fff,
        disabled: #7F7F7F
      },
      background: {
        default: transparent,
        hover: #0AB93A,
        pressed: #087927,
        disabled: #CACACA
      }
    },
	}

	$ui-rs-core.buttons.dark = {
    fontFamily: $ui-rs-core.types.fonts.normal,
		defaultFontSize: $ui-rs-core.types.settings.defaultButtonInputFontSize,
    style: {
      default: {
        paddingLeft: 1.9375em,
        paddingRight: 1.9375em,
        paddingTop: 0.75em,
        paddingBottom: 0.75em,
      },
      small: {
        paddingLeft: 0.5em,
        paddingRight: 0.5em,
        paddingTop: 0.5em,
        paddingBottom: 0.5em
      }
    },
    default: {
      color: {
        default: #fff,
        border: #fff,
        hover: #0AB93A,
        pressed: #0AB93A,
        disabled: #7F7F7F
      },
      background: {
        default: transparent,
        hover: #fff,
        pressed: #fff,
        disabled: #CACACA
      }
    },
    red: {
      color: {
        default: #E11010,
        border: #E11010,
        hover: #fff,
        pressed: #fff,
        disabled: #7F7F7F
      },
      background: {
        default: transparent,
        hover: #E11010,
        pressed: #6A0000,
        disabled: #CACACA
      }
    },
    green: {
      color: {
        default: #0AB93A,
        border: #0AB93A,
        hover: #fff,
        pressed: #fff,
        disabled: #7F7F7F
      },
      background: {
        default: transparent,
        hover: #0AB93A,
        pressed: #087927,
        disabled: #CACACA
      }
    },
    blue: {
      color: {
        default: #1671F4,
        border: #1671F4,
        hover: #fff,
        pressed: #fff,
        disabled: #7F7F7F
      },
      background: {
        default: transparent,
        hover: #1671f4,
        pressed: #0B49A2,
        disabled: #CACACA
      }
    },
    black: {
      color: {
        default: #0AB93A,
        border: #0AB93A,
        hover: #fff,
        pressed: #fff,
        disabled: #7F7F7F
      },
      background: {
        default: transparent,
        hover: #0AB93A,
        pressed: #087927,
        disabled: #CACACA
      }
    },
	}
}
setButtonConfig();

setIconButtonConfig() {
  $ui-rs-core.iconButtons.light = {
    style: {
      default: {
        fontFamily: $ui-rs-core.types.fonts.normal,
        defaultFontSize: $ui-rs-core.types.settings.defaultButtonInputFontSize,
        height: 50px,
        minWidth: 180px,
        marginRight: 1em,
        marginBottom: 1em,
        marginLeft: 1em
      },
      small: {
        fontFamily: $ui-rs-core.types.fonts.normal,
        defaultFontSize: $ui-rs-core.types.settings.defaultButtonInputFontSize,
        height: 50px,
        minWidth: 180px,
        marginRight: 1em,
        marginBottom: 1em,
        marginLeft: 1em
      }
    }
  }

  $ui-rs-core.iconButtons.dark = {
    style: {
      default: {
        fontFamily: $ui-rs-core.types.fonts.normal,
        defaultFontSize: $ui-rs-core.types.settings.defaultButtonInputFontSize,
        height: 50px,
        minWidth: 180px,
        marginRight: 1em,
        marginBottom: 1em,
        marginLeft: 1em
      },
      small: {
        fontFamily: $ui-rs-core.types.fonts.normal,
        defaultFontSize: $ui-rs-core.types.settings.defaultButtonInputFontSize,
        height: 50px,
        minWidth: 180px,
        marginRight: 1em,
        marginBottom: 1em,
        marginLeft: 1em
      }
    }
  }
}
setIconButtonConfig();

/*
 * Default slider setup
 */

setSliderConfig() {
	$ui-rs-core.sliders.light = {
    width: 15em,
    height: 1em,
    radius: 0.25em,
    highlight: #E11010,
    background: #CACACA,
    thumbColour: $brandWhite,
    thumbSize: 1em
  }

	$ui-rs-core.sliders.dark = {
    width: 15em,
    height: 1em,
    radius: 0.25em,
    highlight: #E11010,
    background: #CACACA,
    thumbColour: $brandWhite,
    thumbSize: 1em
  }
}
setSliderConfig();