@braineet/ui
Version:
Braineet design system
283 lines • 7.56 kB
JavaScript
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/* eslint-disable no-nested-ternary */
import { lighten as _lighten, light as lightColor } from '../../utils';
var defaultGrey = '#d8d8d8';
var gray = '#f4f6f7';
var white = '#ffffff';
var dark = '#1f2233';
var darkLight = '#475285';
var primary = '#6767e5';
var primaryLight = '#7f90ff';
var secondary = '#00ccbb';
var secondaryLight = '#00e5da';
var action = '#2b97de';
var success = '#00a838';
var warning = '#ffb300';
var error = '#F94747';
var notif = '#F94747';
var pending = '#9777df';
var other1 = '#ed62d2';
var other2 = '#ff7d51';
var other3 = '#ffc213';
var other4 = '#7551ea';
var other5 = '#28d8d8';
var other6 = '#8cd234';
var colorLight = function colorLight(object, color, other) {
if (object && object[color]) {
if (object[color].light) {
return object[color].light;
}
if (object[color] && object[color].default && !object[color][color + "Light"]) {
return lightColor(object[color].default, 10);
}
return other;
}
return other;
};
export default (function (overrides) {
if (overrides === void 0) {
overrides = {};
}
return _extends({
white: white,
gray: gray,
white100: '#e9eaef',
white90: '#F4F6F7',
white50: '#ffffff',
white20: '#ffffff80',
white10: '#ffffff33',
// Black
black: '#4c5784',
black100: '#070a21',
black90: '#2a2d4a',
black50: '#4c5784',
black20: '#a2aac0',
black10: '#e9eaef',
blackOpacity10: '#4c57841a',
blackOpacity20: '#47528533',
blackOpacity40: '#47528566',
blackOpacity60: '#47528599',
blackOpacity80: '#475285cc',
// Brand
brand: '#007f75',
brand100: '#002929',
brand90: '#005050',
brand50: '#007f75',
brand20: '#71dbcf',
brand10: '#def6f4',
// Brand Secondary
brandSecondary: '#4e49de',
brandSecondary100: '#15064c',
brandSecondary90: '#2e0da3',
brandSecondary50: '#4e49de',
brandSecondary20: '#a7a7f0',
brandSecondary10: '#eaeafc',
// Communication/Action
action: '#2b97de',
action100: '#0d2644',
action90: '#1d5393',
action50: '#2b97de',
action20: '#85d1f7',
action10: '#e1f4fe',
// Communication/Pending
pending: '#9777df',
pending100: '#250c6e',
pending90: '#5b37c7',
pending50: '#9777df',
pending20: '#d2c5f0',
pending10: '#eee7f9',
// Communication/Warning
warning: '#ffb300',
warning100: '#783502',
warning90: '#cc5700',
warning50: '#ffb300',
warning20: '#ffe082',
warning10: '#fff8e1',
// Communication/Success
success: '#00a838',
success100: '#02501b',
success90: '#006c23',
success50: '#00a838',
success20: '#94e0af',
success10: '#e5f8eb',
// Communication/Error
error: '#F94747',
error100: '#49080d',
error90: '#c1000e',
error50: '#f94747',
error20: '#f69696',
error10: '#ffeaee',
// Palette/Yellow
yellow: '#facc15',
yellow100: '#713f12',
yellow90: '#a36e00',
yellow50: '#facc15',
yellow20: '#fef08a',
yellow10: '#fefce8',
// Palette/Orange
orange: '#fb923c',
orange100: '#7c2d12',
orange90: '#c2410c',
orange50: '#fb923c',
orange20: '#fed7aa',
orange10: '#fff7ed',
// Palette/Red
red: '#F65050',
red100: '#7f1d1d',
red90: '#b91c1c',
red50: '#F65050',
red20: '#fecaca',
red10: '#fef2f2',
// Palette/Pink
pink: '#fb4ba7',
pink100: '#831843',
pink90: '#db2777',
pink50: '#fb4ba7',
pink20: '#fbcfe8',
pink10: '#fdf2f8',
// Palette/Grape
grape: '#d946ef',
grape100: '#641169',
grape90: '#a21caf',
grape50: '#d946ef',
grape20: '#f5d0fe',
grape10: '#fdf4ff',
// Palette/Violet
violet: '#8b5cf6',
violet100: '#341466',
violet90: '#6d28d9',
violet50: '#8b5cf6',
violet20: '#ddd6fe',
violet10: '#f5f3ff',
// Palette/Indigo
indigo: '#5C7CFA',
indigo100: '#312e81',
indigo90: '#4338ca',
indigo50: '#5160f5',
indigo20: '#c7d2fe',
indigo10: '#eef2ff',
// Palette/Blue
blue: '#3b82f6',
blue100: '#112869',
blue90: '#1d4ed8',
blue50: '#3b82f6',
blue20: '#bfdbfe',
blue10: '#eff6ff',
// Palette/Cyan
cyan: '#009db8',
cyan100: '#164e63',
cyan90: '#0e7490',
cyan50: '#009db8',
cyan20: '#a5f3fc',
cyan10: '#ecfeff',
// Palette/Teal
teal: '#2dd4bf',
teal100: '#134e4a',
teal90: '#0f766e',
teal50: '#2dd4bf',
teal20: '#99f6e4',
teal10: '#f0fdfa',
// Palette/Green
green: '#22c55e',
green100: '#14532d',
green90: '#15803d',
green50: '#22c55e',
green20: '#bbf7d0',
green10: '#f0fdf4',
// Palette/Lime
lime: '#84cc16',
lime100: '#365314',
lime90: '#4d7c0f',
lime50: '#84cc16',
lime20: '#d9f99d',
lime10: '#f7fee7'
}, overrides, {
dark: _extends({
default: dark,
light: colorLight(overrides, 'dark', darkLight)
}, overrides.dark, {
lighten: function lighten(opacity) {
return _lighten(overrides.dark && overrides.dark.default || dark, opacity);
}
}),
primary: _extends({
default: primary,
light: colorLight(overrides, 'primary', primaryLight)
}, overrides.primary, {
lighten: function lighten(opacity) {
return _lighten(overrides.primary && overrides.primary.default || primary, opacity);
}
}),
secondary: _extends({
default: secondary,
light: colorLight(overrides, 'secondary', secondaryLight)
}, overrides.secondary, {
lighten: function lighten(opacity) {
return _lighten(overrides.secondary && overrides.secondary.default || secondary, opacity);
}
}),
intent: _extends({
action: action,
success: success,
warning: warning,
error: error,
notif: notif,
pending: pending
}, overrides.intent),
other: _extends({
other1: {
default: other1,
lighten: function lighten(opacity) {
return _lighten(other1, opacity);
}
},
other2: {
default: other2,
lighten: function lighten(opacity) {
return _lighten(other2, opacity);
}
},
other3: {
default: other3,
lighten: function lighten(opacity) {
return _lighten(other3, opacity);
}
},
other4: {
default: other4,
lighten: function lighten(opacity) {
return _lighten(other4, opacity);
}
},
other5: {
default: other5,
lighten: function lighten(opacity) {
return _lighten(other5, opacity);
}
},
other6: {
default: other6,
lighten: function lighten(opacity) {
return _lighten(other6, opacity);
}
}
}, overrides.other),
gradient: _extends({
primary: "linear-gradient(to bottom right, red, " + primaryLight + " " + primary + ")"
}, overrides.gradient),
background: _extends({
light: {
white: '#FFFFFF',
grey: '#F4F6F7'
},
white: white,
gray: gray,
black: '#E9EAEF',
default: defaultGrey
}, overrides.background),
text: _extends({
muted: _lighten('#4C5784', 0.5),
default: '#4C5784'
}, overrides.text)
});
});