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.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. 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"); } }; }();
  2. 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; };
  3. import { colorToInt, intToHex, colorToHex } from './colorUtils';
  4. import * as sRGB from './color/transformSRGB';
  5. import * as LAB from './color/transformCIELAB';
  6. export function parse(theme) {
  7. var isItem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  8. var colors = Object.keys(theme);
  9. var parsedTheme = {};
  10. for (var i = 0; i < colors.length; ++i) {
  11. var name = colors[i];
  12. var value = theme[name];
  13. if (isItem) {
  14. if (name === 'base' || name.startsWith('lighten') || name.startsWith('darken')) {
  15. parsedTheme[name] = colorToHex(value);
  16. }
  17. } else if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object') {
  18. parsedTheme[name] = parse(value, true);
  19. } else {
  20. parsedTheme[name] = genVariations(name, colorToInt(value));
  21. }
  22. }
  23. return parsedTheme;
  24. }
  25. /**
  26. * Generate the CSS for a base color (.primary)
  27. */
  28. var genBaseColor = function genBaseColor(name, value) {
  29. 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}';
  30. };
  31. /**
  32. * Generate the CSS for a variant color (.primary.darken-2)
  33. */
  34. var genVariantColor = function genVariantColor(name, variant, value) {
  35. var _variant$split = variant.split(/(\d)/, 2),
  36. _variant$split2 = _slicedToArray(_variant$split, 2),
  37. type = _variant$split2[0],
  38. n = _variant$split2[1];
  39. 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}';
  40. };
  41. var genColorVariableName = function genColorVariableName(name) {
  42. var variant = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'base';
  43. return '--v-' + name + '-' + variant;
  44. };
  45. var genColorVariable = function genColorVariable(name) {
  46. var variant = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'base';
  47. return 'var(' + genColorVariableName(name, variant) + ')';
  48. };
  49. export function genStyles(theme) {
  50. var cssVar = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  51. var colors = Object.keys(theme);
  52. if (!colors.length) return '';
  53. var variablesCss = '';
  54. var css = '';
  55. var aColor = cssVar ? genColorVariable('primary') : theme.primary.base;
  56. css += 'a { color: ' + aColor + '; }';
  57. for (var i = 0; i < colors.length; ++i) {
  58. var name = colors[i];
  59. var value = theme[name];
  60. if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) !== 'object') continue;
  61. css += genBaseColor(name, cssVar ? genColorVariable(name) : value.base);
  62. cssVar && (variablesCss += ' ' + genColorVariableName(name) + ': ' + value.base + ';\n');
  63. var variants = Object.keys(value);
  64. for (var _i = 0; _i < variants.length; ++_i) {
  65. var variant = variants[_i];
  66. var variantValue = value[variant];
  67. if (variant === 'base') continue;
  68. css += genVariantColor(name, variant, cssVar ? genColorVariable(name, variant) : variantValue);
  69. cssVar && (variablesCss += ' ' + genColorVariableName(name, variant) + ': ' + variantValue + ';\n');
  70. }
  71. }
  72. if (cssVar) {
  73. variablesCss = ':root {\n' + variablesCss + '}\n\n';
  74. }
  75. return variablesCss + css;
  76. }
  77. export function genVariations(name, value) {
  78. var values = {
  79. base: intToHex(value)
  80. };
  81. for (var i = 5; i > 0; --i) {
  82. values['lighten' + i] = intToHex(lighten(value, i));
  83. }
  84. for (var _i2 = 1; _i2 <= 4; ++_i2) {
  85. values['darken' + _i2] = intToHex(darken(value, _i2));
  86. }
  87. return values;
  88. }
  89. function lighten(value, amount) {
  90. var lab = LAB.fromXYZ(sRGB.toXYZ(value));
  91. lab[0] = lab[0] + amount * 10;
  92. return sRGB.fromXYZ(LAB.toXYZ(lab));
  93. }
  94. function darken(value, amount) {
  95. var lab = LAB.fromXYZ(sRGB.toXYZ(value));
  96. lab[0] = lab[0] - amount * 10;
  97. return sRGB.fromXYZ(LAB.toXYZ(lab));
  98. }
  99. //# sourceMappingURL=theme.js.map