@nestbotics/nct_frontend_common_components
Version:
A collection of reusable React components with theme management and styling utilities
261 lines (253 loc) • 7 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useMode = exports.tokens = exports.themeSettings = exports.ColorModeContext = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _styles = require("@mui/material/styles");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
// color design tokens export
var tokens = exports.tokens = function tokens(mode) {
return _objectSpread({}, mode === "dark" ? {
grey: {
100: "#e0e0e0",
200: "#c2c2c2",
300: "#a3a3a3",
400: "#858585",
500: "#666666",
600: "#525252",
700: "#3d3d3d",
800: "#292929",
900: "#141414"
},
primary: {
100: "#d0d1d5",
200: "#a1a4ab",
300: "#727681",
400: "#1F2A40",
500: "#141b2d",
600: "#101624",
700: "#0c101b",
800: "#080b12",
900: "#040509"
},
greenAccent: {
100: "#dbf5ee",
200: "#b7ebde",
300: "#94e2cd",
400: "#70d8bd",
500: "#4cceac",
600: "#3da58a",
700: "#2e7c67",
800: "#1e5245",
900: "#0f2922"
},
redAccent: {
100: "#f8dcdb",
200: "#f1b9b7",
300: "#e99592",
400: "#e2726e",
500: "#db4f4a",
600: "#af3f3b",
700: "#832f2c",
800: "#58201e",
900: "#2c100f"
},
blueAccent: {
100: "#e1e2fe",
200: "#c3c6fd",
300: "#a4a9fc",
400: "#868dfb",
500: "#6870fa",
600: "#535ac8",
700: "#3e4396",
800: "#2a2d64",
900: "#151632"
},
purple: {
100: "#ded2e7",
200: "#bca4cf",
300: "#9b77b7",
400: "#79499f",
500: "#581c87",
600: "#46166c",
700: "#351151",
800: "#230b36",
900: "#12061b"
}
} : {
// Here we change HexaCode Arrangements
grey: {
100: "#141414",
200: "#292929",
300: "#3d3d3d",
400: "#525252",
500: "#666666",
600: "#858585",
700: "#a3a3a3",
800: "#c2c2c2",
900: "#e0e0e0"
},
primary: {
100: "#040509",
200: "#080b12",
300: "#0c101b",
400: "#f2f0f0",
500: "#141b2d",
600: "#1F2A40",
700: "#727681",
800: "#a1a4ab",
900: "#d0d1d5",
950: "#fff"
},
greenAccent: {
100: "#0f2922",
200: "#1e5245",
300: "#2e7c67",
400: "#3da58a",
500: "#4cceac",
600: "#70d8bd",
700: "#94e2cd",
800: "#b7ebde",
900: "#dbf5ee"
},
redAccent: {
100: "#2c100f",
200: "#58201e",
300: "#832f2c",
400: "#af3f3b",
500: "#db4f4a",
600: "#e2726e",
700: "#e99592",
800: "#f1b9b7",
900: "#f8dcdb"
},
blueAccent: {
100: "#151632",
200: "#2a2d64",
300: "#3e4396",
400: "#535ac8",
500: "#6870fa",
600: "#868dfb",
700: "#a4a9fc",
800: "#c3c6fd",
900: "#e1e2fe"
},
purple: {
900: "#ded2e7",
800: "#bca4cf",
700: "#9b77b7",
600: "#581c87",
500: "#79499f",
400: "#46166c",
300: "#351151",
200: "#230b36",
100: "#12061b"
}
});
};
// mui theme settings
var themeSettings = exports.themeSettings = function themeSettings(mode) {
var colors = tokens(mode);
return {
palette: _objectSpread({
mode: mode
}, mode === "dark" ? {
// palette values for dark mode
primary: {
main: colors.primary[500]
},
secondary: {
main: colors.greenAccent[500]
},
neutral: {
dark: colors.grey[700],
main: colors.grey[500],
light: colors.grey[100]
},
background: {
default: colors.primary[500]
}
} : {
// palette values for light mode
primary: {
main: colors.primary[100]
},
secondary: {
main: colors.greenAccent[500]
},
neutral: {
dark: colors.grey[700],
main: colors.grey[500],
light: colors.grey[100]
},
background: {
default: "#fcfcfc"
}
}),
typography: {
fontFamily: ["Source Sans Pro", "sans-serif"].join(","),
fontSize: 12,
h1: {
fontFamily: ["Source Sans Pro", "sans-serif"].join(","),
fontSize: 40
},
h2: {
fontFamily: ["Source Sans Pro", "sans-serif"].join(","),
fontSize: 32
},
h3: {
fontFamily: ["Source Sans Pro", "sans-serif"].join(","),
fontSize: 24
},
h4: {
fontFamily: ["Source Sans Pro", "sans-serif"].join(","),
fontSize: 20
},
h5: {
fontFamily: ["Source Sans Pro", "sans-serif"].join(","),
fontSize: 16
},
h6: {
fontFamily: ["Source Sans Pro", "sans-serif"].join(","),
fontSize: 14
}
}
};
};
// context for color mode
var ColorModeContext = exports.ColorModeContext = /*#__PURE__*/(0, _react.createContext)({
toggleColorMode: function toggleColorMode() {}
});
var useMode = exports.useMode = function useMode() {
// Initialize mode state, defaulting to "dark" if no mode is stored in localStorage
var savedMode = "light";
var _useState = (0, _react.useState)(savedMode),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
mode = _useState2[0],
setMode = _useState2[1];
// Update local storage when mode changes
(0, _react.useEffect)(function () {
localStorage.setItem("themeMode", mode);
}, [mode]);
// Memoize color mode object with toggle function
var colorMode = (0, _react.useMemo)(function () {
return {
toggleColorMode: function toggleColorMode() {
return setMode(function (prev) {
return prev === "light" ? "dark" : "light";
});
}
};
}, []);
// Memoize theme object based on current mode
var theme = (0, _react.useMemo)(function () {
return (0, _styles.createTheme)(themeSettings(mode));
}, [mode]);
// Return array for backward compatibility (destructuring as [theme, colorMode])
return [theme, colorMode];
};