159 lines
4.6 KiB
JavaScript
159 lines
4.6 KiB
JavaScript
import { Anchor, Button, Container, createTheme, InputWrapper, List, rem, Stepper } from '@mantine/core';
|
|
import { generateColors } from '@mantine/colors-generator';
|
|
export const DAYJS_LOCALE_MAP = {
|
|
en: 'en',
|
|
de: 'de',
|
|
uk: 'uk',
|
|
fil: 'en',
|
|
tr: 'tr',
|
|
bs: 'bs',
|
|
sq: 'sq',
|
|
vi: 'vi',
|
|
es: 'es',
|
|
hi: 'hi',
|
|
ar: 'ar',
|
|
};
|
|
export const theme = createTheme({
|
|
primaryColor: 'primary',
|
|
breakpoints: {
|
|
xs: '36em',
|
|
sm: '48em',
|
|
md: '62em',
|
|
lg: '75em',
|
|
xl: '88em',
|
|
},
|
|
colors: {
|
|
primary: generateColors('#eab308'),
|
|
education: generateColors('#34D399'),
|
|
license: generateColors('#FBBF24'),
|
|
language: generateColors('#5FA5FA'),
|
|
additional: generateColors('#C084FC'),
|
|
success: generateColors('#10B981'),
|
|
error: generateColors('#EF4444'),
|
|
},
|
|
fontFamily: 'ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
|
|
fontFamilyMonospace: 'ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace',
|
|
fontSizes: {
|
|
xs: rem(10),
|
|
sm: rem(12),
|
|
md: rem(14),
|
|
lg: rem(16),
|
|
lgxl: rem(18),
|
|
xl: rem(20),
|
|
xxl: rem(32),
|
|
xxll: rem(38),
|
|
xxxl: rem(48),
|
|
xxxxl: rem(56),
|
|
hero: rem(64),
|
|
},
|
|
headings: {
|
|
fontFamily: 'ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
|
|
sizes: {
|
|
h1: {
|
|
fontSize: rem(40),
|
|
lineHeight: '1.2',
|
|
fontWeight: '400',
|
|
},
|
|
h2: {
|
|
fontSize: rem(20),
|
|
lineHeight: '1.2',
|
|
fontWeight: '600',
|
|
},
|
|
h3: {
|
|
fontSize: rem(18),
|
|
lineHeight: '1.2',
|
|
fontWeight: '600',
|
|
},
|
|
h4: {
|
|
fontSize: rem(16),
|
|
lineHeight: '1.2',
|
|
fontWeight: '600',
|
|
},
|
|
h5: {
|
|
fontSize: rem(14),
|
|
lineHeight: '1.2',
|
|
fontWeight: '600',
|
|
},
|
|
h6: {
|
|
fontSize: rem(12),
|
|
lineHeight: '1.2',
|
|
fontWeight: '600',
|
|
},
|
|
},
|
|
},
|
|
components: {
|
|
Container: Container.extend({
|
|
defaultProps: {
|
|
px: 'xl',
|
|
},
|
|
vars: (currentTheme, props) => {
|
|
if (props.size === 'xl') {
|
|
return {
|
|
root: {
|
|
'--container-size': '80rem',
|
|
},
|
|
};
|
|
}
|
|
return { root: {} };
|
|
},
|
|
}),
|
|
Button: Button.extend({
|
|
defaultProps: {
|
|
size: 'md',
|
|
radius: 'lg',
|
|
},
|
|
styles: () => ({
|
|
root: {
|
|
color: 'var(--mantine-color-black)',
|
|
},
|
|
}),
|
|
}),
|
|
InputWrapper: InputWrapper.extend({
|
|
styles: {
|
|
label: {
|
|
fontSize: rem(14),
|
|
fontWeight: 500,
|
|
marginBottom: rem(10),
|
|
},
|
|
},
|
|
}),
|
|
Stepper: Stepper.extend({
|
|
styles: {
|
|
stepIcon: {
|
|
backgroundColor: 'initial',
|
|
color: 'var(--mantine-color-dimmed)',
|
|
width: rem(30),
|
|
height: rem(30),
|
|
minWidth: rem(30),
|
|
minHeight: rem(30),
|
|
},
|
|
stepLabel: {
|
|
fontSize: rem(14),
|
|
color: 'var(--mantine-color-dimmed)',
|
|
},
|
|
},
|
|
}),
|
|
Anchor: Anchor.extend({
|
|
styles: (currentTheme) => ({
|
|
root: {
|
|
textDecoration: 'none',
|
|
color: currentTheme.colors.gray[9],
|
|
'&:hover, &:focusVisible': {
|
|
color: `${currentTheme.colors.blue[1]} !important`,
|
|
},
|
|
},
|
|
}),
|
|
}),
|
|
List: List.extend({
|
|
styles: (currentTheme) => ({
|
|
root: {
|
|
paddingLeft: rem(10),
|
|
},
|
|
item: {
|
|
color: currentTheme.colors.gray[8],
|
|
},
|
|
}),
|
|
}),
|
|
},
|
|
});
|
|
//# sourceMappingURL=index.js.map
|