cinnecta-ui/lib/themes/CinnectaTheme.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _breakpoints = require("../helpers/breakpoints");

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var unit = 15;
var columns = 12;
var globalRadius = 3;
var color = {
  primary: '#324973',
  primarySaturated: '#224173',
  primaryDarker: '#1c355c',
  secondary: '#518cf4',
  secondarySaturated: '#4484f2',
  secondaryDarker: '#336ecc',
  success: '#3adb76',
  warning: '#ffae00',
  alert: '#d93900',
  successLight: '',
  warningLight: '',
  alertLight: '#fff0e9',
  successDark: '',
  warningDark: '',
  alertDark: '#a52c00',
  gray: '#ececec',
  grayLighter: '#f8f8f8',
  grayLight: '#f5f5f5',
  grayDark: '#9B9B9B',
  grayDarker: '#5F5F5F',
  grayDarkest: '#2e2e2e',
  blueGray: '#e6e9f0',
  blueGrayLightest: '#F7F9FB',
  blueGrayLighter: '#f4f6fb',
  blueGrayLight: '#EEF0F4',
  blueGrayDark: '#8096b7',
  black: '#0a0a0a',
  white: '#fefefe',
  shadow: 'rgba(0, 0, 0, .2)',
  shadowWeakest: 'rgba(0, 0, 0, .035)',
  shadowWeaker: 'rgba(0, 0, 0, .055)',
  shadowWeak: 'rgba(0, 0, 0, .1)',
  shadowStrong: 'rgba(0, 0, 0, .3)',
  shadowStronger: 'rgba(0, 0, 0, .5)',
  shadowStrongest: 'rgba(0, 0, 0, .7)',
  fog: 'rgba(255, 255, 255, .2)',
  fogWeakest: 'rgba(255, 255, 255, .075)',
  fogWeaker: 'rgba(255, 255, 255, .1)',
  fogWeak: 'rgba(255, 255, 255, .15)',
  fogStrong: 'rgba(255, 255, 255, .3)',
  fogStronger: 'rgba(255, 255, 255, .5)',
  fogStrongest: 'rgba(255, 255, 255, .7)',
  transparent: 'transparent'
};
var input = {
  background: color.grayLight,
  color: color.grayDarker,
  placeholderColor: color.grayDark,
  disabledBackground: color.gray,
  invalidBackground: color.alertLight,
  focusBackground: color.white,
  spacing: 0.5 * unit,
  border: {
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: color.grayLight,
    borderRadius: globalRadius
  },
  disabledBorder: {
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: color.gray,
    borderRadius: globalRadius
  },
  invalidBorder: {
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: color.alert,
    borderRadius: globalRadius
  },
  focusBorder: {
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: color.secondary,
    borderRadius: globalRadius
  },
  radioBorderRadius: '50%',
  checkboxBorderRadius: globalRadius
};
var font = {
  family: {
    default: 'Oxygen, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif',
    icon: 'cinnecta-suite'
  },
  size: {
    small: {
      title1: 32,
      title2: 26,
      title3: 21,
      large: 17,
      regular: 15,
      small: 14,
      micro: 8
    },
    large: {
      title1: 34,
      title2: 29,
      title3: 23,
      large: 18,
      regular: 16,
      small: 14,
      micro: 8
    }
  }
};
var map = [{
  featureType: 'all',
  elementType: 'labels.text.fill',
  stylers: [{
    saturation: 36
  }, {
    color: '#5f5f5f'
  }, {
    lightness: 40
  }]
}, {
  featureType: 'all',
  elementType: 'labels.text.stroke',
  stylers: [{
    visibility: 'on'
  }, {
    color: '#ffffff'
  }, {
    'lightness': 16
  }]
}, {
  featureType: 'all',
  elementType: 'labels.icon',
  stylers: [{
    visibility: 'off'
  }]
}, {
  featureType: 'administrative',
  elementType: 'geometry.fill',
  stylers: [{
    color: '#fefefe'
  }, {
    lightness: 20
  }]
}, {
  featureType: 'administrative',
  elementType: 'geometry.stroke',
  stylers: [{
    color: '#fefefe'
  }, {
    lightness: 17
  }, {
    weight: 1.2
  }]
}, {
  featureType: 'landscape.man_made',
  elementType: 'geometry',
  stylers: [{
    saturation: 22
  }, {
    lightness: 54
  }, {
    gamma: 0.17
  }, {
    hue: '#005cff'
  }]
}, {
  featureType: 'landscape.natural',
  elementType: 'geometry',
  stylers: [{
    color: '#eef0f4'
  }]
}, {
  "featureType": "poi",
  "elementType": "geometry",
  "stylers": [{
    "color": "#eef0f4"
  }, {
    "lightness": 21
  }]
}, {
  "featureType": "poi.park",
  "elementType": "geometry",
  "stylers": [{
    "color": "#e6e9f0"
  }, {
    "lightness": 21
  }]
}, {
  "featureType": "road.highway",
  "elementType": "geometry.fill",
  "stylers": [{
    "color": "#ffffff"
  }, {
    "lightness": 17
  }]
}, {
  "featureType": "road.highway",
  "elementType": "geometry.stroke",
  "stylers": [{
    "color": "#ffffff"
  }, {
    "lightness": 29
  }, {
    "weight": 0.2
  }]
}, {
  "featureType": "road.arterial",
  "elementType": "geometry",
  "stylers": [{
    "color": "#ffffff"
  }, {
    "lightness": 18
  }]
}, {
  "featureType": "road.local",
  "elementType": "geometry",
  "stylers": [{
    "color": "#ffffff"
  }, {
    "lightness": 16
  }]
}, {
  "featureType": "transit",
  "elementType": "geometry",
  "stylers": [{
    "color": "#eef0f4"
  }, {
    "lightness": 19
  }]
}, {
  "featureType": "water",
  "elementType": "geometry",
  "stylers": [{
    "color": "#d7dae1"
  }, {
    "lightness": 17
  }]
}];
var _default = {
  unit: unit,
  units: function units(value) {
    return value * unit;
  },
  radius: globalRadius,
  columns: columns,
  map: map,
  icon: {
    defaultColor: color.grayDark,
    size: {
      micro: 8,
      smaller: 12,
      small: 16,
      default: 20,
      large: 24,
      huge: 36
    }
  },
  container: {
    micro: 800,
    small: 1200,
    default: 1440,
    large: 1800
  },
  weight: {
    light: 300,
    normal: 400,
    bold: 600
  },
  font: _objectSpread({}, font.family),
  input: {
    inlineSpacing: 32,
    spacing: input.spacing,
    borderRadius: globalRadius,
    background: input.background,
    color: input.color,
    placeholderColor: input.placeholderColor,
    verticalPadding: 10,
    horizontalPadding: 10,
    default: _objectSpread({}, input.border, {
      background: input.background,
      color: input.color,
      fontFamily: font.family.default,
      fontSize: font.size.small.regular,
      letterSpacing: 'normal',
      lineHeight: 1.3,
      marginBottom: input.spacing
    }),
    disabled: _objectSpread({
      background: input.disabledBackground
    }, input.disabledBorder),
    invalid: _objectSpread({
      background: input.invalidBackground
    }, input.invalidBorder),
    small: {
      color: color.grayDarker,
      fontFamily: font.family.default,
      fontSize: font.size.small.small,
      letterSpacing: 'normal',
      lineHeight: 1.4
    },
    focus: _objectSpread({}, input.focusBorder, {
      background: input.focusBackground
    }),
    radio: {
      size: 18,
      background: input.white,
      borderRadius: input.radioBorderRadius,
      border: _objectSpread({}, input.border, {
        borderColor: color.gray,
        borderRadius: input.radioBorderRadius
      }),
      disabled: {
        background: input.disabledBackground,
        border: _objectSpread({}, input.disabledBorder, {
          borderRadius: input.radioBorderRadius
        })
      },
      invalid: {
        background: input.invalidBackground,
        border: _objectSpread({}, input.invalidBorder, {
          borderRadius: input.radioBorderRadius
        })
      },
      checkMark: {
        width: 8,
        height: 8,
        background: color.secondary,
        borderRadius: input.radioBorderRadius
      }
    },
    checkbox: {
      size: 18,
      background: input.white,
      borderRadius: input.checkboxBorderRadius,
      border: _objectSpread({}, input.border, {
        borderColor: color.gray,
        borderRadius: input.checkboxBorderRadius
      }),
      disabled: {
        background: input.disabledBackground,
        border: _objectSpread({}, input.disabledBorder, {
          borderRadius: input.checkboxBorderRadius
        })
      },
      invalid: {
        background: input.invalidBackground,
        border: _objectSpread({}, input.invalidBorder, {
          borderRadius: input.checkboxBorderRadius
        })
      },
      checkMark: {
        width: 8,
        height: 8,
        background: color.secondary
      }
    }
  },
  fontSize: _objectSpread({}, font.size),
  lineHeight: {
    regular: 1.4,
    short: 1.125,
    tall: 1.6
  },
  shadow: {
    level0: {
      boxShadow: 'none'
    },
    level1: {
      boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)'
    },
    level2: {
      boxShadow: '0 4px 4px 0 rgba(0, 0, 0, 0.05)'
    },
    level3: {
      boxShadow: '0 3px 9px 3px rgba(0, 0, 0, 0.05)'
    }
  },
  color: _objectSpread({}, color, {
    shimmer: {
      from: color.blueGray,
      to: color.blueGrayLight
    },
    background: color.white
  }),
  breakpoint: {
    xlarge: "@media (min-width: ".concat(_breakpoints.breakpoints.xlarge - 1, "px)"),
    large: "@media (min-width: ".concat(_breakpoints.breakpoints.large - 1, "px)"),
    mediumAndAbove: "@media (min-width: ".concat(_breakpoints.breakpoints.medium, "px)"),
    medium: "@media (max-width: ".concat(_breakpoints.breakpoints.large - 1, "px)"),
    small: "@media (max-width: ".concat(_breakpoints.breakpoints.medium - 1, "px)")
  },
  animation: {
    shimmer: {
      '0%': {
        backgroundColor: '#e6e9f0'
      },
      '50%': {
        backgroundColor: '#EEF0F4'
      },
      '100%': {
        backgroundColor: '#e6e9f0'
      }
    },
    spinner: {
      from: {
        transform: 'rotate(0deg)'
      },
      to: {
        transform: 'rotate(360deg)'
      }
    }
  },
  gutter: {
    small: {
      micro: {
        top: .25 * unit,
        right: .25 * unit,
        bottom: .25 * unit,
        left: .25 * unit
      },
      small: {
        top: .5 * unit,
        right: .5 * unit,
        bottom: .5 * unit,
        left: .5 * unit
      },
      regular: {
        top: 1 * unit,
        right: 1 * unit,
        bottom: 1 * unit,
        left: 1 * unit
      },
      large: {
        top: 1 * unit,
        right: 1 * unit,
        bottom: 1 * unit,
        left: 1 * unit
      }
    },
    medium: {
      micro: {
        top: .25 * unit,
        right: .25 * unit,
        bottom: .25 * unit,
        left: .25 * unit
      },
      small: {
        top: .5 * unit,
        right: .5 * unit,
        bottom: .5 * unit,
        left: .5 * unit
      },
      regular: {
        top: .5 * unit,
        right: .5 * unit,
        bottom: .5 * unit,
        left: .5 * unit
      },
      large: {
        top: 1 * unit,
        right: 1 * unit,
        bottom: 1 * unit,
        left: 1 * unit
      }
    },
    large: {
      micro: {
        top: .25 * unit,
        right: .25 * unit,
        bottom: .25 * unit,
        left: .25 * unit
      },
      small: {
        top: .5 * unit,
        right: .5 * unit,
        bottom: .5 * unit,
        left: .5 * unit
      },
      regular: {
        top: .5 * unit,
        right: .5 * unit,
        bottom: .5 * unit,
        left: .5 * unit
      },
      large: {
        top: 1 * unit,
        right: 1 * unit,
        bottom: 1 * unit,
        left: 1 * unit
      }
    },
    xlarge: {
      micro: {
        top: .25 * unit,
        right: .25 * unit,
        bottom: .25 * unit,
        left: .25 * unit
      },
      small: {
        top: .5 * unit,
        right: .5 * unit,
        bottom: .5 * unit,
        left: .5 * unit
      },
      regular: {
        top: 1 * unit,
        right: 1 * unit,
        bottom: 1 * unit,
        left: 1 * unit
      },
      large: {
        top: 1 * unit,
        right: 1 * unit,
        bottom: 1 * unit,
        left: 1 * unit
      }
    }
  }
};
exports.default = _default;