@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
99 lines (98 loc) • 4.84 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "plasmaCSSVariablesResolver", {
enumerable: true,
get: function() {
return plasmaCSSVariablesResolver;
}
});
var _define_property = require("@swc/helpers/_/_define_property");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _core = require("@mantine/core");
var plasmaCSSVariablesResolver = function plasmaCSSVariablesResolver(theme) {
// Get the default Mantine CSS variables
var mantineVariables = (0, _core.defaultCssVariablesResolver)(theme);
// Define your custom variables
var customVariables = {
variables: {
'--coveo-fw-light': '300',
'--coveo-fw-normal': '400',
'--coveo-fw-bold': '500',
'--coveo-transition-duration': '150ms',
'--coveo-transition-function': 'ease-in-out'
},
dark: {
// custom colors
'--coveo-color-title': 'var(--mantine-color-text)',
'--coveo-app-background': theme.colors.dark[8],
'--coveo-color-input-border': theme.colors.dark[4],
'--coveo-color-text-readonly': theme.colors.dark[0],
'--coveo-color-bg-readonly': theme.colors.dark[6],
'--coveo-color-text-primary': 'var(--mantine-primary-color-4)',
'--coveo-color-bg-dark-surface': 'var(--mantine-primary-color-3)',
// mantine overrides
'--mantine-primary-color-light': 'var(--mantine-primary-color-7)',
'--mantine-color-body': theme.colors.dark[7],
'--mantine-color-default': theme.colors.dark[7],
'--mantine-color-default-border': theme.colors.dark[6],
'--mantine-color-default-hover': theme.colors.dark[6],
'--mantine-color-error': theme.colors.red[4],
'--mantine-color-text': theme.colors.dark[0],
'--mantine-color-dimmed': theme.colors.dark[1],
'--mantine-color-gray-filled': theme.colors.dark[6],
'--mantine-color-warning-filled': theme.colors.yellow[2],
'--mantine-color-warning-light': theme.colors.yellow[6],
'--mantine-color-placeholder': theme.colors.dark[2],
'--mantine-color-disabled': theme.colors.dark[7],
'--mantine-color-disabled-color': theme.colors.dark[3]
},
light: {
// custom colors
'--coveo-app-background': theme.colors.gray[0],
'--coveo-color-input-border': theme.colors.gray[3],
'--coveo-color-title': 'var(--mantine-color-text)',
'--coveo-color-text-readonly': 'var(--mantine-color-text)',
'--coveo-color-bg-readonly': theme.colors.gray[1],
'--coveo-color-text-primary': 'var(--mantine-primary-color-filled)',
'--coveo-color-bg-dark-surface': theme.colors.violet[9],
// mantine overrides
'--mantine-color-body': 'var(--mantine-color-white)',
'--mantine-color-default': 'var(--mantine-color-white)',
'--mantine-color-default-border': theme.colors.gray[2],
'--mantine-color-default-hover': theme.colors.gray[1],
'--mantine-color-error': theme.colors.red[5],
'--mantine-color-dimmed': theme.colors.gray[5],
'--mantine-color-placeholder': theme.colors.gray[4],
'--mantine-color-disabled': theme.colors.gray[1],
'--mantine-color-disabled-color': theme.colors.gray[3]
}
};
Object.keys(theme.colors).forEach(function(color) {
Object.assign(customVariables.light, getVariantLightVariables({
theme: theme,
color: color,
colorScheme: 'light'
}));
});
// Merge Mantine variables with custom variables
var result = {
variables: _object_spread._({}, mantineVariables.variables, customVariables.variables),
dark: _object_spread._({}, mantineVariables.dark, customVariables.dark),
light: _object_spread._({}, mantineVariables.light, customVariables.light)
};
return result;
};
var getVariantLightVariables = function getVariantLightVariables(param) {
var theme = param.theme, color = param.color, colorScheme = param.colorScheme;
if (!theme.colors[color]) {
return {};
}
if (colorScheme === 'light') {
var primaryShade = (0, _core.getPrimaryShade)(theme, 'light');
var _obj;
return _obj = {}, _define_property._(_obj, "--mantine-color-".concat(color, "-light"), (0, _core.alpha)(theme.colors[color][primaryShade], 0.1)), _define_property._(_obj, "--mantine-color-".concat(color, "-light-hover"), (0, _core.alpha)(theme.colors[color][primaryShade], 0.16)), _obj;
}
};
//# sourceMappingURL=plasmaCSSVariablesResolver.js.map