sparkl-ui
Version:
Modern and minimalist React UI library.
523 lines (492 loc) • 14.1 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
enumerableOnly && (symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
})), keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = null != arguments[i] ? arguments[i] : {};
i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
_defineProperty(target, key, source[key]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
function _typeof(obj) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
}, _typeof(obj);
}
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 defaultFont = {
sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
mono: 'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace',
prism: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono", "Courier New", monospace'
};
var defaultBreakpoints = {
xs: {
min: '0',
max: '650px'
},
sm: {
min: '650px',
max: '900px'
},
md: {
min: '900px',
max: '1280px'
},
lg: {
min: '1280px',
max: '1920px'
},
xl: {
min: '1920px',
max: '10000px'
}
};
var defaultLayout = {
gap: '16pt',
gapNegative: '-16pt',
gapHalf: '8pt',
gapHalfNegative: '-8pt',
gapQuarter: '4pt',
gapQuarterNegative: '-4pt',
pageMargin: '16pt',
pageWidth: '750pt',
pageWidthWithMargin: '782pt',
breakpointMobile: defaultBreakpoints.xs.max,
breakpointTablet: defaultBreakpoints.sm.max,
radius: '6px',
unit: '16px'
};
var palette$2 = {
accents_1: '#fafafa',
accents_2: '#eaeaea',
accents_3: '#999',
accents_4: '#888',
accents_5: '#666',
accents_6: '#444',
accents_7: '#333',
accents_8: '#111',
background: '#fff',
foreground: '#000',
selection: '#79ffe1',
secondary: '#666',
code: '#f81ce5',
border: '#eaeaea',
error: '#e00',
errorLight: '#ff1a1a',
errorLighter: '#f7d4d6',
errorDark: '#c50000',
success: '#0070f3',
successLight: '#3291ff',
successLighter: '#d3e5ff',
successDark: '#0761d1',
warning: '#f5a623',
warningLight: '#f7b955',
warningLighter: '#ffefcf',
warningDark: '#ab570a',
cyan: '#50e3c2',
cyanLighter: '#aaffec',
cyanLight: '#79ffe1',
cyanDark: '#29bc9b',
violet: '#7928ca',
violetLighter: '#e3d7fc',
violetLight: '#8a63d2',
violetDark: '#4c2889',
purple: '#f81ce5',
alert: '#ff0080',
magenta: '#eb367f',
link: '#0070f3'
};
var expressiveness$2 = {
linkStyle: 'none',
linkHoverStyle: 'none',
dropdownBoxShadow: '0 4px 4px 0 rgba(0, 0, 0, 0.02)',
scrollerStart: 'rgba(255, 255, 255, 1)',
scrollerEnd: 'rgba(255, 255, 255, 0)',
shadowSmall: '0 5px 10px rgba(0, 0, 0, 0.12)',
shadowMedium: '0 8px 30px rgba(0, 0, 0, 0.12)',
shadowLarge: '0 30px 60px rgba(0, 0, 0, 0.12)',
portalOpacity: 0.25
};
var font$2 = defaultFont;
var breakpoints$2 = defaultBreakpoints;
var layout$2 = defaultLayout;
var themes$1 = {
type: 'light',
font: font$2,
layout: layout$2,
palette: palette$2,
breakpoints: breakpoints$2,
expressiveness: expressiveness$2
};
var lightTheme = themes$1;
var palette$1 = {
accents_1: '#111',
accents_2: '#333',
accents_3: '#444',
accents_4: '#666',
accents_5: '#888',
accents_6: '#999',
accents_7: '#eaeaea',
accents_8: '#fafafa',
background: '#000',
foreground: '#fff',
selection: '#f81ce5',
secondary: '#888',
code: '#79ffe1',
border: '#333',
error: '#e00',
errorLighter: '#f7d4d6',
errorLight: '#ff1a1a',
errorDark: '#c50000',
success: '#0070f3',
successLighter: '#d3e5ff',
successLight: '#3291ff',
successDark: '#0761d1',
warning: '#f5a623',
warningLighter: '#ffefcf',
warningLight: '#f7b955',
warningDark: '#ab570a',
cyan: '#50e3c2',
cyanLighter: '#aaffec',
cyanLight: '#79ffe1',
cyanDark: '#29bc9b',
violet: '#7928ca',
violetLighter: '#e3d7fc',
violetLight: '#8a63d2',
violetDark: '#4c2889',
purple: '#f81ce5',
alert: '#ff0080',
magenta: '#eb367f',
link: '#3291ff'
};
var expressiveness$1 = {
linkStyle: 'none',
linkHoverStyle: 'none',
dropdownBoxShadow: '0 0 0 1px #333',
scrollerStart: 'rgba(255, 255, 255, 1)',
scrollerEnd: 'rgba(255, 255, 255, 0)',
shadowSmall: '0 0 0 1px #333',
shadowMedium: '0 0 0 1px #333',
shadowLarge: '0 0 0 1px #333',
portalOpacity: 0.75
};
var font$1 = defaultFont;
var breakpoints$1 = defaultBreakpoints;
var layout$1 = defaultLayout;
var themes = {
type: 'dark',
font: font$1,
layout: layout$1,
palette: palette$1,
breakpoints: breakpoints$1,
expressiveness: expressiveness$1
};
var darkTheme = themes;
var isObject = function isObject(target) {
return target && _typeof(target) === 'object';
};
var deepDuplicable = function deepDuplicable(source, target) {
if (!isObject(target) || !isObject(source)) return source;
var sourceKeys = Object.keys(source);
var result = {};
for (var _i = 0, _sourceKeys = sourceKeys; _i < _sourceKeys.length; _i++) {
var key = _sourceKeys[_i];
var sourceValue = source[key];
var targetValue = target[key];
if (Array.isArray(sourceValue) && Array.isArray(targetValue)) {
result[key] = targetValue.concat(sourceValue);
} else if (isObject(sourceValue) && isObject(targetValue)) {
result[key] = deepDuplicable(sourceValue, _objectSpread2({}, targetValue));
} else if (targetValue) {
result[key] = targetValue;
} else {
result[key] = sourceValue;
}
}
return result;
};
var getPresets = function getPresets() {
return [lightTheme, darkTheme];
};
var getPresetStaticTheme = function getPresetStaticTheme() {
return lightTheme;
};
var isAvailableThemeType = function isAvailableThemeType(type) {
if (!type) return false;
var presetThemes = getPresets();
var hasType = presetThemes.find(function (theme) {
return theme.type === type;
});
return !hasType;
};
var isPresetTheme = function isPresetTheme(themeOrType) {
if (!themeOrType) return false;
var isType = typeof themeOrType === 'string';
var type = isType ? themeOrType : themeOrType.type;
return !isAvailableThemeType(type);
};
var hasUserCustomTheme = function hasUserCustomTheme() {
var themes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
return !!themes.find(function (item) {
return isAvailableThemeType(item.type);
});
};
var create = function create(base, custom) {
if (!isAvailableThemeType(custom.type)) {
throw new Error('Duplicate or unavailable theme type');
}
return deepDuplicable(base, custom);
};
var createFromDark = function createFromDark(custom) {
return create(darkTheme, custom);
};
var createFromLight = function createFromLight(custom) {
return create(lightTheme, custom);
};
var Themes = {
isPresetTheme: isPresetTheme,
isAvailableThemeType: isAvailableThemeType,
hasUserCustomTheme: hasUserCustomTheme,
getPresets: getPresets,
getPresetStaticTheme: getPresetStaticTheme,
create: create,
createFromDark: createFromDark,
createFromLight: createFromLight
};
var Themes$1 = Themes;
var mauve = {
mauve1: "hsl(300, 20.0%, 99.0%)",
mauve2: "hsl(300, 7.7%, 97.5%)",
mauve3: "hsl(294, 5.5%, 95.3%)",
mauve4: "hsl(289, 4.7%, 93.3%)",
mauve5: "hsl(283, 4.4%, 91.3%)",
mauve6: "hsl(278, 4.1%, 89.1%)",
mauve7: "hsl(271, 3.9%, 86.3%)",
mauve8: "hsl(255, 3.7%, 78.8%)",
mauve9: "hsl(252, 4.0%, 57.3%)",
mauve10: "hsl(253, 3.5%, 53.5%)",
mauve11: "hsl(252, 4.0%, 44.8%)",
mauve12: "hsl(260, 25.0%, 11.0%)"
};
var plum = {
plum1: "hsl(292, 90.0%, 99.4%)",
plum2: "hsl(300, 100%, 98.6%)",
plum3: "hsl(299, 71.2%, 96.4%)",
plum4: "hsl(299, 62.0%, 93.8%)",
plum5: "hsl(298, 56.1%, 90.5%)",
plum6: "hsl(296, 51.3%, 85.8%)",
plum7: "hsl(295, 48.2%, 78.9%)",
plum8: "hsl(292, 47.7%, 70.8%)",
plum9: "hsl(292, 45.0%, 51.0%)",
plum10: "hsl(292, 50.2%, 46.9%)",
plum11: "hsl(292, 60.0%, 42.5%)",
plum12: "hsl(291, 66.0%, 14.0%)"
};
var crimson = {
crimson1: "hsl(332, 100%, 99.4%)",
crimson2: "hsl(330, 100%, 98.4%)",
crimson3: "hsl(331, 85.6%, 96.6%)",
crimson4: "hsl(331, 78.1%, 94.2%)",
crimson5: "hsl(332, 72.1%, 91.1%)",
crimson6: "hsl(333, 67.0%, 86.7%)",
crimson7: "hsl(335, 63.5%, 80.4%)",
crimson8: "hsl(336, 62.3%, 72.9%)",
crimson9: "hsl(336, 80.0%, 57.8%)",
crimson10: "hsl(336, 73.7%, 53.5%)",
crimson11: "hsl(336, 75.0%, 47.2%)",
crimson12: "hsl(340, 65.0%, 14.5%)"
};
var blue = {
blue1: "hsl(206, 100%, 99.2%)",
blue2: "hsl(210, 100%, 98.0%)",
blue3: "hsl(209, 100%, 96.5%)",
blue4: "hsl(210, 98.8%, 94.0%)",
blue5: "hsl(209, 95.0%, 90.1%)",
blue6: "hsl(209, 81.2%, 84.5%)",
blue7: "hsl(208, 77.5%, 76.9%)",
blue8: "hsl(206, 81.9%, 65.3%)",
blue9: "hsl(206, 100%, 50.0%)",
blue10: "hsl(208, 100%, 47.3%)",
blue11: "hsl(211, 100%, 43.2%)",
blue12: "hsl(211, 100%, 15.0%)"
};
var yellow = {
yellow1: "hsl(60, 54.0%, 98.5%)",
yellow2: "hsl(52, 100%, 95.5%)",
yellow3: "hsl(55, 100%, 90.9%)",
yellow4: "hsl(54, 100%, 86.6%)",
yellow5: "hsl(52, 97.9%, 82.0%)",
yellow6: "hsl(50, 89.4%, 76.1%)",
yellow7: "hsl(47, 80.4%, 68.0%)",
yellow8: "hsl(48, 100%, 46.1%)",
yellow9: "hsl(53, 92.0%, 50.0%)",
yellow10: "hsl(50, 100%, 48.5%)",
yellow11: "hsl(42, 100%, 29.0%)",
yellow12: "hsl(40, 55.0%, 13.5%)"
};
var violet = {
violet1: "hsl(255, 65.0%, 99.4%)",
violet2: "hsl(252, 100%, 99.0%)",
violet3: "hsl(252, 96.9%, 97.4%)",
violet4: "hsl(252, 91.5%, 95.5%)",
violet5: "hsl(252, 85.1%, 93.0%)",
violet6: "hsl(252, 77.8%, 89.4%)",
violet7: "hsl(252, 71.0%, 83.7%)",
violet8: "hsl(252, 68.6%, 76.3%)",
violet9: "hsl(252, 56.0%, 57.5%)",
violet10: "hsl(251, 48.1%, 53.5%)",
violet11: "hsl(250, 43.0%, 48.0%)",
violet12: "hsl(254, 60.0%, 18.5%)"
};
var red = {
red1: "hsl(359, 100%, 99.4%)",
red2: "hsl(359, 100%, 98.6%)",
red3: "hsl(360, 100%, 96.8%)",
red4: "hsl(360, 97.9%, 94.8%)",
red5: "hsl(360, 90.2%, 91.9%)",
red6: "hsl(360, 81.7%, 87.8%)",
red7: "hsl(359, 74.2%, 81.7%)",
red8: "hsl(359, 69.5%, 74.3%)",
red9: "hsl(358, 75.0%, 59.0%)",
red10: "hsl(358, 69.4%, 55.2%)",
red11: "hsl(358, 65.0%, 48.7%)",
red12: "hsl(354, 50.0%, 14.6%)"
}; //
var breakpoints = {
xs: {
min: '0',
max: '650px'
},
sm: {
min: '650px',
max: '900px'
},
md: {
min: '900px',
max: '1280px'
},
lg: {
min: '1280px',
max: '1920px'
},
xl: {
min: '1920px',
max: '10000px'
}
};
var layout = {
gap: '16pt',
gapNegative: '-16pt',
gapHalf: '8pt',
gapHalfNegative: '-8pt',
gapQuarter: '4pt',
gapQuarterNegative: '-4pt',
pageMargin: '16pt',
pageWidth: '750pt',
pageWidthWithMargin: '782pt',
breakpointMobile: breakpoints.xs.max,
breakpointTablet: breakpoints.sm.max,
radius: '.25rem',
// "2px",
unit: '16px'
};
var expressiveness = {
linkStyle: 'none',
linkHoverStyle: 'underline',
scrollerStart: 'rgba(255, 255, 255, 1)',
scrollerEnd: 'rgba(255, 255, 255, 0)',
dropdownBoxShadow: '',
// "0 4px 4px 0 rgba(0, 0, 0, 0.02)",
shadowSmall: '',
// "2px 4px 0 rgba(0, 0, 0, 0.3)",
shadowMedium: '',
// "4px 6px 0 rgba(0, 0, 0, 0.3)",
shadowLarge: '',
// "8px 10px 0 rgba(0, 0, 0, 0.3)",
portalOpacity: 0.25
};
var palette = {
accents_1: mauve.mauve2,
accents_2: mauve.mauve6,
accents_3: mauve.mauve7,
accents_4: mauve.mauve8,
accents_5: mauve.mauve9,
accents_6: mauve.mauve10,
accents_7: mauve.mauve11,
accents_8: mauve.mauve12,
background: mauve.mauve1,
foreground: mauve.mauve12,
selection: yellow.yellow5,
secondary: mauve.mauve11,
code: crimson.crimson10,
border: mauve.mauve9,
error: red.red9,
errorLight: red.red7,
errorLighter: red.red5,
errorDark: red.red11,
success: violet.violet9,
successLight: violet.violet7,
successLighter: violet.violet5,
successDark: violet.violet11,
warning: yellow.yellow9,
warningLight: yellow.yellow6,
warningLighter: yellow.yellow4,
warningDark: yellow.yellow10,
cyan: blue.blue7,
cyanLighter: blue.blue5,
cyanLight: blue.blue6,
cyanDark: blue.blue8,
violet: plum.plum9,
violetLighter: plum.plum6,
violetLight: plum.plum8,
violetDark: plum.plum11,
purple: crimson.crimson8,
alert: crimson.crimson9,
magenta: crimson.crimson10,
link: violet.violet11
};
var font = {
sans: '"Moriston", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
mono: 'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace',
prism: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono", "Courier New", monospace'
};
var SparklTheme = Themes$1.createFromLight({
type: 'sparkl',
palette: palette,
font: font,
layout: layout,
expressiveness: expressiveness
});
exports.SparklTheme = SparklTheme;
exports.breakpoints = breakpoints;
exports.expressiveness = expressiveness;
exports.font = font;
exports.layout = layout;