nacho-core-theme.scss

/** **************** SIZING CONCERNS **************** **/

// This handles the max size of a container we want in our application. This usually has to do with grid size or
// some window size restriction in the design world
$max-container-width: 1128px;

/** **************** COLOR CONCERNS **************** **/

// The standardized color opacities in the application
$email-content-color-opacity: 0.95;

/// All the available colors we want to be able to work with in our application. This is currently only for
/// internal use only, which is why this file has been added to .npmignore. A proper theme will be released in
/// the future as a sample for the open source world
$color-bin: (
  blue0: #e6f7ff,
  blue1: #caedff,
  blue2: #98d8f4,
  blue3: #65c3e8,
  blue4: #33aada,
  blue5: #0091ca,
  blue6: #0084bf,
  blue7: #0073b1,
  blue8: #006097,
  blue9: #004b7c,
  blue10: #003f67,
  purple0: #f5f5fe,
  purple1: #e6e6ff,
  purple2: #cacafc,
  purple3: #b2b0fa,
  purple4: #9896f2,
  purple5: #827be9,
  purple6: #756ddd,
  purple7: #665ed0,
  purple8: #544bc2,
  purple9: #4034b0,
  purple10: #2c2b9d,
  red0: #fef2f1,
  red1: #ffe0db,
  red2: #ffbcba,
  red3: #ff999a,
  red4: #ff6c70,
  red5: #ff2c33,
  red6: #ee1620,
  red7: #d11124,
  red8: #b10823,
  red9: #900021,
  red10: #790021,
  orange0: #fff3ea,
  orange1: #fde3d2,
  orange2: #f8c19e,
  orange3: #f6a16c,
  orange4: #ef7e37,
  orange5: #e55800,
  orange6: #cf5000,
  orange7: #b74700,
  orange8: #993a00,
  orange9: #7c2e00,
  orange10: #6a2300,
  teal0: #ecf9fb,
  teal1: #ccf0f3,
  teal2: #98dade,
  teal3: #68c5cd,
  teal4: #17afb8,
  teal5: #0e95a0,
  teal6: #0c8996,
  teal7: #087889,
  teal8: #036475,
  teal9: #00505d,
  teal10: #00414c,
  pink0: #fff1fa,
  pink1: #ffdff6,
  pink2: #ffb9e2,
  pink3: #ff91cf,
  pink4: #ff61b6,
  pink5: #ff1b90,
  pink6: #e61e89,
  pink7: #cc167e,
  pink8: #ac0a70,
  pink9: #890060,
  pink10: #720059,
  green0: #f0f7e8,
  green1: #dcf0cb,
  green2: #b5d99f,
  green3: #91c475,
  green4: #6baf49,
  green5: #469a1f,
  green6: #398b18,
  green7: #2f7b15,
  green8: #22670f,
  green9: #165209,
  green10: #0e4507,
  gray0: #f3f6f8,
  gray1: #e6e9ec,
  gray2: #cdcfd2,
  gray3: #b3b6b9,
  gray4: #9b9ea2,
  gray5: #84878a,
  gray6: #777a7d,
  gray7: #696c6f,
  gray8: #575a5d,
  gray9: #44474a,
  gray10: #373a3d,
  slate0: #f3f6f8,
  slate1: #e1e9ee,
  slate2: #c7d1d8,
  slate3: #acb9c2,
  slate4: #92a1ac,
  slate5: #7a8b98,
  slate6: #6a7e89,
  slate7: #5c6f7c,
  slate8: #485d69,
  slate9: #344a57,
  slate10: #283e4a,
  silver0: #f5f5f5,
  silver1: #e9e9e9,
  silver2: #cfcfcf,
  silver3: #b6b6b6,
  silver4: #9e9e9e,
  silver5: #878787,
  silver6: #7a7a7a,
  silver7: #6c6c6c,
  silver8: #5a5a5a,
  silver9: #474747,
  silver10: #3a3a3a,
  gold0: #fdf4dc,
  gold1: #f1e8c5,
  gold2: #dccea4,
  gold3: #c5b583,
  gold4: #af9b62,
  gold5: #9b8443,
  gold6: #8b783f,
  gold7: #7a6b3b,
  gold8: #645831,
  gold9: #4e4628,
  gold10: #42391e,
  copper0: #fdf3f1,
  copper1: #f5e3e0,
  copper2: #e2c7c4,
  copper3: #d2adac,
  copper4: #c19191,
  copper5: #b27878,
  copper6: #a76969,
  copper7: #9b5959,
  copper8: #834a4a,
  copper9: #693939,
  copper10: #5c2d2d,
  white: #ffffff,
  black: #000000,
  dropdown-menu-grey1: #333333,
  dropdown-menu-focus-black: #262626,
  dropdown-menu-focus-white: #f5f5f5
);

/** **************** SHAPE CONCERNS **************** **/

/// Regular font family
/// @type List
$text-font-stack: ('Lato', 'Helvetica', 'Arial', sans-serif) !default;
$font-weights: (
  normal: (
    // super thin
      2: 100,
    // thin
      3: 300,
    // standard
      4: 400,
    // bold
      6: 700,
    // super bold
      7: 900
  ),
  italic: (
    2: 100,
    3: 300,
    4: 400,
    6: 700,
    7: 900
  )
);

$font-sizes: (
  xx-large: 24px,
  x-large: 20px,
  large: 16px,
  standard: 14px,
  small: 12px
);

// Some people like a little roundness to their component shapes
$default-border-radius: 2px;

/// Main brand color
/// @type Color
$brand-color: map-get($color-bin, slate9);

/// Secondary color
/// @type Color
$secondary-color: map-get($color-bin, white);

/// Copy text color
/// @type Color
$text-color: map-get($color-bin, gray10);

/// Copy text color
/// @type Color
$text-invert-color: map-get($color-bin, gray1);

/// Copy link color
/// @type Color
$link-color: map-get($color-bin, blue7);

/// Navigation height
/// Specifies a fixed height for the application's navigation bar, useful for dependent layouts and
/// component positioning
/// @type Length
$application-navbar-static-height: item-spacing(8);

/// Application wide height for breadcrumbs
$application-navigation-breadcrumbs-static-height: item-spacing(6);
$application-navigation-tab-static-height: item-spacing(7);

/// For animations related to banner alerts. This corresponds to a constant value in the js files at
/// constants/notifications.js
$banner-animation-speed: 0.6s;
$banner-alerts-height: 52px;

/// Absolute URL where all assets are served from
/// @type String
$base-url: '/assets/' !default;

/// Retrieves an image url from the list of urls
/// @param {} image-ref a reference to the image resource name to get from the resource map
@function image-resource($image-ref) {
  /// @type Map<string, string>
  /// @prop {string} image-ref key of the image resource
  /// @prop {string} url url for the image resource
  $image-resources: (
    clipboard-check-230dp: 'https://static.licdn-ei.com/sc/h/cvjnp31ewwtl6l0tect666zcw',
    empty-state: 'https://static.licdn.com/sc/h/a9jcbnnyn1jjtd2a1vnxd92m2',
    empty-state-success: 'https://static.licdn-ei.com/sc/h/ck3j6ionjnf43283m6lvv9prh'
  );

  @return map-get($image-resources, $image-ref);
}

@mixin font-standard() {
  font-weight: fw(normal, 4);
  color: $text-color;
}