@arche-mc2/arche-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
222 lines • 8.98 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var Color = require("color");
var _1 = require("./");
exports.themeFactory = function (baseTheme) {
var colorTheme = {
primary: baseTheme.primary,
secondary: baseTheme.secondary,
'secondary-l1': Color(baseTheme.secondary)
.rotate(-0.5)
.lighten(28.5 / 100)
.hex(),
'secondary-l2': Color(baseTheme.secondary)
.rotate(1)
.saturate(3 / 100)
.lighten(50.5 / 100)
.hex(),
'secondary-d1': Color(baseTheme.secondary)
.rotate(-3)
.desaturate(31 / 100)
.darken(9 / 100)
.hex(),
dark: baseTheme.dark,
'dark-1': Color(baseTheme.dark)
.rotate(1)
.desaturate(58 / 100)
.lighten(296.5 / 100)
.hex(),
'dark-2': Color(baseTheme.dark)
.rotate(-1)
.desaturate(59 / 100)
.lighten(406 / 100)
.hex(),
'dark-3': Color(baseTheme.dark)
.rotate(-1)
.desaturate(58 / 100)
.lighten(461.5 / 100)
.hex(),
light: baseTheme.light,
'light-1': Color(baseTheme.light)
.darken(1 / 100)
.hex(),
'light-2': Color(baseTheme.light)
.darken(4 / 100)
.hex(),
alert: baseTheme.alert,
warning: baseTheme.warning,
info: baseTheme.info,
flashy: baseTheme.flashy,
};
var colors = {
tangerine: '#F59100',
pumpkine: '#ee7f01',
greyishBrown: '#3f3b37',
QR: '#3f3b37',
brownGrey: '#D7D7D7',
pinkishGrey: '#ccc8c5',
lightGrey: '#FDECEF',
paleGrey: '#979797',
white: '#ffffff',
turquoiseBlue: '#039eb2',
oceanBlue: '#0360a8',
paleRed: '#D0021B',
boringGreen: '#6DBD8E',
tangerine10: '#f39100',
turquoiseDark: '#0e8c9b',
paleYellow: '#f8f1ad',
social: '#507cc0',
socialDark: '#4c70a7',
grey: '#4E5B59',
green: '#6DBD8E',
tangerine2: '#FCC865',
darkBlue: '#2C2274',
darkBlue2: '#181340',
pink: '#EB5A77',
pink2: '#CE5A77',
purple: '#9590B9',
purple2: '#E5E4EE',
};
var colorMap = tslib_1.__assign(tslib_1.__assign({}, _1.default.colorMap), {
dark1: '#293953',
dark2: '#6B4E71',
dark3: '#829399',
darkGray1: '#182026',
darkGray2: '#202b33',
darkGray3: '#293742',
darkGray4: '#979797',
darkGray5: '#394b59',
gray1: '#5c7080',
gray2: '#738694',
gray3: '#8a9ba8',
gray4: '#a7b6c2',
gray5: '#bfccd6',
gray6: '#979797',
lightGray1: '#ced9e0',
lightGray2: '#d8e1e8',
lightGray3: '#e1e8ed',
lightGray4: '#ebf1f5',
lightGray5: '#f5f8fa',
light1: '#34E4EA',
light2: '#D6DBB2',
light3: '#6D72C3',
default: colorTheme['light-2'],
defaultActive: Color(colorTheme['dark-3']).darken(0.1).hex(),
defaultBorder: colorTheme['dark-3'],
defaultLight: Color(colorTheme['dark-3']).lighten(0.5).hex(),
defaultHoverBorder: colorTheme['light-2'],
defaultFg: colorTheme.light,
defaultDark: colorTheme['dark-3'],
defaultHoverActive: colorTheme['dark-3'],
defaultHover: colorTheme['dark-3'],
defaultHoverFg: colorTheme.light,
primary: colorTheme.primary,
primaryActive: Color(colorTheme.primary).darken(0.1).hex(),
primaryBorder: colorTheme.primary,
primaryHoverBorder: colorTheme.primary,
primaryFg: colorTheme.light,
primaryDark: colorTheme.dark,
primaryLight: Color(colorTheme.primary).lighten(0.4).hex(),
primaryHover: colorTheme.dark,
primaryHoverActive: colors.purple,
primaryHoverActiveBorder: colors.purple,
primaryHoverFg: colorTheme.light,
secondary: 'transparent',
secondaryActive: 'transparent',
secondaryBorder: colorTheme.secondary,
secondaryHoverBorder: colorTheme.secondary,
secondaryFg: colorTheme.secondary,
secondaryDark: Color(colorTheme.primary).darken(0.1).hex(),
secondaryLight: Color(colorTheme.primary).lighten(0.4).hex(),
secondaryHover: 'transparent',
secondaryHoverActive: colors.lightGrey,
secondaryHoverActiveBorder: colorTheme.secondary,
secondaryHoverFg: colorTheme.secondary,
secondary2: 'transparent',
secondary2Hover: 'transparent',
secondary2Active: colors.purple,
secondary2HoverActive: colors.purple,
secondary2Border: colorTheme.primary,
secondary2HoverBorder: colorTheme.dark,
secondary2HoverActiveBorder: 'transparent',
secondary2Fg: colorTheme.primary,
secondary2HoverFg: colorTheme.dark,
secondary2Dark: Color(colorTheme.primary).darken(0.1).hex(),
secondary2Light: Color(colorTheme.primary).lighten(0.4).hex(),
info: colorTheme.info,
infoActive: Color(colorTheme.info).darken(0.1).hex(),
infoBorder: colors.turquoiseDark,
infoHoverBorder: Color(colorTheme.info)
.darken(0.2)
.darken(0.1)
.hex(),
infoFg: colorTheme.light,
infoDark: Color(colorTheme.info).darken(0.2).darken(0.1).hex(),
infoLight: Color(colorTheme.info)
.darken(0.2)
.lighten(0.6)
.hex(),
infoHover: Color(colorTheme.info).darken(0.2).darken(0.1).hex(),
infoHoverActive: Color(colorTheme.info)
.darken(0.2)
.darken(0.1)
.hex(),
infoHoverFg: colorTheme.light,
warning: colorTheme.warning,
warningActive: Color(colorTheme.warning).darken(0.1).hex(),
warningBorder: colorTheme.warning,
warningHoverBorder: Color(colorTheme.warning).darken(0.1).hex(),
warningFg: colorTheme.light,
warningDark: Color(colorTheme.warning).darken(0.1).hex(),
warningLight: Color(colorTheme.warning).lighten(0.4).hex(),
warningHover: Color(colorTheme.warning).darken(0.1).hex(),
warningHoverActive: Color(colorTheme.warning).darken(0.1).hex(),
warningHoverFg: colorTheme.light,
success: colorTheme.info,
successActive: Color(colorTheme.info).darken(0.1).hex(),
successBorder: colorTheme.info,
successHoverBorder: Color(colorTheme.info).darken(0.1).hex(),
successFg: colorTheme.light,
successDark: Color(colorTheme.info).darken(0.1).hex(),
successLight: Color(colorTheme.info).lighten(0.4).hex(),
successHover: Color(colorTheme.info).darken(0.1).hex(),
successHoverActive: Color(colorTheme.info).darken(0.1).hex(),
successHoverFg: colorTheme.light,
danger: colorTheme.alert,
dangerActive: Color(colorTheme.alert).darken(0.1).hex(),
dangerBorder: colorTheme.alert,
dangerHoverBorder: Color(colorTheme.alert).darken(0.1).hex(),
dangerFg: colorTheme.light,
dangerDark: Color(colorTheme.alert).darken(0.1).hex(),
dangerLight: Color(colorTheme.alert).lighten(0.4).hex(),
dangerHover: Color(colorTheme.alert).darken(0.1).hex(),
dangerHoverActive: Color(colorTheme.alert).darken(0.1).hex(),
dangerHoverFg: colorTheme.light,
error: colorTheme.alert,
errorActive: Color(colorTheme.alert).darken(0.1).hex(),
errorBorder: colorTheme.alert,
errorHoverBorder: Color(colorTheme.alert).darken(0.1).hex(),
errorFg: colorTheme.light,
errorDark: Color(colorTheme.alert).darken(0.1).hex(),
errorLight: Color(colorTheme.alert).lighten(0.4).hex(),
errorHover: Color(colorTheme.alert).darken(0.1).hex(),
errorHoverActive: Color(colorTheme.alert).darken(0.1).hex(),
errorHoverFg: colorTheme.light,
white1: colorTheme.light,
white2: colorTheme['light-1'],
white3: colorTheme['light-2'],
offwhite: Color(colorTheme['light-1']).darken(0.05).hex(),
grey1: colors.grey,
lightGrey1: colorTheme['light-1'],
black1: colorTheme.dark,
black2: colorTheme['dark-1'],
black3: colorTheme['dark-2'],
disabledBg: '#E5E4EE',
disabledFg: '#9590B9',
white: colorTheme.light,
});
return tslib_1.__assign(tslib_1.__assign({}, _1.default), { colorTheme: colorTheme, colorMap: colorMap });
};
exports.default = exports.themeFactory;
//# sourceMappingURL=themeFactory.js.map