Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

theme.js 5.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
  6. var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
  7. exports.parse = parse;
  8. exports.genStyles = genStyles;
  9. exports.genVariations = genVariations;
  10. var _colorUtils = require('./colorUtils');
  11. var _transformSRGB = require('./color/transformSRGB');
  12. var sRGB = _interopRequireWildcard(_transformSRGB);
  13. var _transformCIELAB = require('./color/transformCIELAB');
  14. var LAB = _interopRequireWildcard(_transformCIELAB);
  15. function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
  16. function parse(theme) {
  17. var isItem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  18. var colors = Object.keys(theme);
  19. var parsedTheme = {};
  20. for (var i = 0; i < colors.length; ++i) {
  21. var name = colors[i];
  22. var value = theme[name];
  23. if (isItem) {
  24. if (name === 'base' || name.startsWith('lighten') || name.startsWith('darken')) {
  25. parsedTheme[name] = (0, _colorUtils.colorToHex)(value);
  26. }
  27. } else if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object') {
  28. parsedTheme[name] = parse(value, true);
  29. } else {
  30. parsedTheme[name] = genVariations(name, (0, _colorUtils.colorToInt)(value));
  31. }
  32. }
  33. return parsedTheme;
  34. }
  35. /**
  36. * Generate the CSS for a base color (.primary)
  37. */
  38. var genBaseColor = function genBaseColor(name, value) {
  39. return '\n.' + name + ' {\n background-color: ' + value + ' !important;\n border-color: ' + value + ' !important;\n}\n.' + name + '--text {\n color: ' + value + ' !important;\n caret-color: ' + value + ' !important;\n}';
  40. };
  41. /**
  42. * Generate the CSS for a variant color (.primary.darken-2)
  43. */
  44. var genVariantColor = function genVariantColor(name, variant, value) {
  45. var _variant$split = variant.split(/(\d)/, 2),
  46. _variant$split2 = _slicedToArray(_variant$split, 2),
  47. type = _variant$split2[0],
  48. n = _variant$split2[1];
  49. return '\n.' + name + '.' + type + '-' + n + ' {\n background-color: ' + value + ' !important;\n border-color: ' + value + ' !important;\n}\n.' + name + '--text.text--' + type + '-' + n + ' {\n color: ' + value + ' !important;\n caret-color: ' + value + ' !important;\n}';
  50. };
  51. var genColorVariableName = function genColorVariableName(name) {
  52. var variant = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'base';
  53. return '--v-' + name + '-' + variant;
  54. };
  55. var genColorVariable = function genColorVariable(name) {
  56. var variant = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'base';
  57. return 'var(' + genColorVariableName(name, variant) + ')';
  58. };
  59. function genStyles(theme) {
  60. var cssVar = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  61. var colors = Object.keys(theme);
  62. if (!colors.length) return '';
  63. var variablesCss = '';
  64. var css = '';
  65. var aColor = cssVar ? genColorVariable('primary') : theme.primary.base;
  66. css += 'a { color: ' + aColor + '; }';
  67. for (var i = 0; i < colors.length; ++i) {
  68. var name = colors[i];
  69. var value = theme[name];
  70. if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) !== 'object') continue;
  71. css += genBaseColor(name, cssVar ? genColorVariable(name) : value.base);
  72. cssVar && (variablesCss += ' ' + genColorVariableName(name) + ': ' + value.base + ';\n');
  73. var variants = Object.keys(value);
  74. for (var _i = 0; _i < variants.length; ++_i) {
  75. var variant = variants[_i];
  76. var variantValue = value[variant];
  77. if (variant === 'base') continue;
  78. css += genVariantColor(name, variant, cssVar ? genColorVariable(name, variant) : variantValue);
  79. cssVar && (variablesCss += ' ' + genColorVariableName(name, variant) + ': ' + variantValue + ';\n');
  80. }
  81. }
  82. if (cssVar) {
  83. variablesCss = ':root {\n' + variablesCss + '}\n\n';
  84. }
  85. return variablesCss + css;
  86. }
  87. function genVariations(name, value) {
  88. var values = {
  89. base: (0, _colorUtils.intToHex)(value)
  90. };
  91. for (var i = 5; i > 0; --i) {
  92. values['lighten' + i] = (0, _colorUtils.intToHex)(lighten(value, i));
  93. }
  94. for (var _i2 = 1; _i2 <= 4; ++_i2) {
  95. values['darken' + _i2] = (0, _colorUtils.intToHex)(darken(value, _i2));
  96. }
  97. return values;
  98. }
  99. function lighten(value, amount) {
  100. var lab = LAB.fromXYZ(sRGB.toXYZ(value));
  101. lab[0] = lab[0] + amount * 10;
  102. return sRGB.fromXYZ(LAB.toXYZ(lab));
  103. }
  104. function darken(value, amount) {
  105. var lab = LAB.fromXYZ(sRGB.toXYZ(value));
  106. lab[0] = lab[0] - amount * 10;
  107. return sRGB.fromXYZ(LAB.toXYZ(lab));
  108. }
  109. //# sourceMappingURL=theme.js.map