@iobroker/adapter-react
Version:
React classes to develop admin interfaces for ioBroker with react.
322 lines (299 loc) • 7.42 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _styles = require("@material-ui/core/styles");
var _orange = _interopRequireDefault(require("@material-ui/core/colors/orange"));
var step = (16 - 5) / 23 / 100;
/**
* Convert hex color in the format '#rrggbb' or '#rgb' to an RGB object.
* @param {string} hex
* @returns {{r: number, g: number, b: number}}
*/
function toInt(hex) {
var rgb = {
r: 0,
g: 0,
b: 0
};
if (hex.length === 7) {
rgb.r = parseInt(hex.substr(1, 2), 16);
rgb.g = parseInt(hex.substr(3, 2), 16);
rgb.b = parseInt(hex.substr(5, 2), 16);
} else if (hex.length === 4) {
var r = hex.substr(1, 1);
var g = hex.substr(2, 1);
var b = hex.substr(3, 1);
rgb.r = parseInt(r + r, 16);
rgb.g = parseInt(g + g, 16);
rgb.b = parseInt(b + b, 16);
}
return rgb;
}
/**
* Convert an RGB object to a hex color string in the format '#rrggbb'.
* @param {{r: number, g: number, b: number}} int
* @returns {string}
*/
function toHex(_int) {
return "#".concat(Math.round(_int.r).toString(16)).concat(Math.round(_int.g).toString(16)).concat(Math.round(_int.b).toString(16));
}
/**
* @param {string} color color in the format '#rrggbb' or '#rgb'
* @param {string} overlayColor overlay color in the format '#rrggbb' or '#rgb'
* @param {number} elevation elevation as an integer starting with 1
* @returns {string} the hex color string in the format '#rrggbb'
*/
function getElevation(color, overlayColor, elevation) {
var rgb = toInt(color);
var overlay = toInt(overlayColor);
rgb.r += overlay.r * (0.05 + step * (elevation - 1));
rgb.g += overlay.g * (0.05 + step * (elevation - 1));
rgb.b += overlay.b * (0.05 + step * (elevation - 1));
return toHex(rgb);
}
/**
* Get all 24 elevations of the given color and overlay.
* @param {string} color color in the format '#rrggbb' or '#rgb'
* @param {string} overlay overlay color in the format '#rrggbb' or '#rgb'
* @returns {import('@material-ui/core/styles/withStyles').CSSProperties}
*/
function getElevations(color, overlay) {
/** @type {import('@material-ui/core/styles/withStyles').CSSProperties} */
var elevations = {};
for (var i = 1; i <= 24; i++) {
elevations["elevation".concat(i)] = {
backgroundColor: getElevation(color, overlay, i)
};
}
return elevations;
}
/**
* The theme creation factory function.
* @param {string} type
* @returns {import('./types').Theme}
*/
var Theme = function Theme(type) {
var theme;
if (type === 'dark') {
theme = {
name: type,
palette: {
type: 'dark',
background: {
paper: '#121212',
"default": '#121212'
},
primary: {
main: '#4dabf5'
},
secondary: {
main: '#436a93'
},
expert: '#14bb00',
text: {
primary: '#ffffff',
secondary: '#ffffff'
}
},
overrides: {
MuiAppBar: {
colorDefault: {
backgroundColor: '#272727'
}
},
MuiLink: {
root: {
textTransform: 'uppercase',
transition: 'color .3s ease',
color: _orange["default"][200],
'&:hover': {
color: _orange["default"][100]
}
}
},
MuiPaper: getElevations('#121212', '#fff')
}
};
} else if (type === 'blue') {
theme = {
name: type,
palette: {
type: 'dark',
background: {
paper: '#151d21',
"default": '#151d21'
},
primary: {
main: '#4dabf5'
},
secondary: {
main: '#436a93'
},
expert: '#14bb00',
text: {
primary: '#ffffff',
secondary: '#ffffff'
}
},
overrides: {
MuiAppBar: {
colorDefault: {
backgroundColor: '#2a3135'
}
},
MuiLink: {
root: {
textTransform: 'uppercase',
transition: 'color .3s ease',
color: _orange["default"][200],
'&:hover': {
color: _orange["default"][100]
}
}
},
MuiPaper: getElevations('#151d21', '#fff')
}
};
} else if (type === 'colored') {
theme = {
name: type,
palette: {
type: 'light',
primary: {
main: '#3399CC'
},
secondary: {
main: '#164477'
},
expert: '#96fc96'
},
overrides: {
MuiAppBar: {
colorDefault: {
backgroundColor: '#3399CC'
}
},
MuiLink: {
root: {
textTransform: 'uppercase',
transition: 'color .3s ease',
color: _orange["default"][400],
'&:hover': {
color: _orange["default"][300]
}
}
}
}
};
} else if (type === 'PT') {
theme = {
name: type,
palette: {
type: 'light',
primary: {
main: '#0F99DE'
},
secondary: {
main: '#88A536'
},
expert: '#BD1B24'
},
overrides: {
MuiAppBar: {
colorDefault: {
backgroundColor: '#0F99DE'
}
},
MuiLink: {
root: {
textTransform: 'uppercase',
transition: 'color .3s ease',
color: _orange["default"][400],
'&:hover': {
color: _orange["default"][300]
}
}
}
}
};
} else if (type === 'DX') {
theme = {
name: type,
palette: {
type: 'light',
primary: {
main: '#F5F5F7'
},
secondary: {
main: '#a9a9a9'
},
expert: '#BD1B24',
text: {
primary: '#007AFE',
secondary: '#007AFE',
disabled: '#007AFEAA'
}
},
overrides: {
MuiAppBar: {
colorDefault: {
backgroundColor: '#a9a9a9'
}
},
MuiLink: {
root: {
textTransform: 'uppercase',
transition: 'color .3s ease',
color: _orange["default"][400],
'&:hover': {
color: _orange["default"][300]
}
}
}
}
};
} else {
theme = {
name: type,
palette: {
type: 'light',
primary: {
main: '#3399CC'
},
secondary: {
main: '#164477'
},
expert: '#14bb00'
},
overrides: {
MuiLink: {
root: {
textTransform: 'uppercase',
transition: 'color .3s ease',
color: _orange["default"][400],
'&:hover': {
color: _orange["default"][300]
}
}
}
}
};
}
theme.toolbar = {
height: 48
}; // add save toolbar
theme.saveToolbar = {
background: theme.palette.primary.main,
button: {
borderRadius: 3,
height: 32
}
};
return (0, _styles.createTheme)(theme);
};
var _default = Theme;
exports["default"] = _default;
//# sourceMappingURL=Theme.js.map