79 lines
2.4 KiB
JavaScript
79 lines
2.4 KiB
JavaScript
import { tints, darkTints, heading, lineHeight, fontWeight, spacing } from 'e-styles';
|
|
|
|
export default {
|
|
base: {
|
|
shared: `
|
|
color: var(--e-styles-heading-color, ${ tints[ '800' ] });
|
|
font-size: var(--e-styles-heading-font-size);
|
|
margin-bottom: var(--e-styles-heading-margin-bottom);
|
|
`,
|
|
variant: {
|
|
h1: `
|
|
--e-styles-heading-font-size: ${ heading.h1 };
|
|
--e-styles-heading-margin-bottom: 2.5 * ${ spacing.base };
|
|
font-weight: ${ fontWeight.medium };
|
|
line-height: ${ lineHeight.flat };
|
|
`,
|
|
h2: `
|
|
--e-styles-heading-font-size: ${ heading.h2 };
|
|
--e-styles-heading-margin-bottom: 2.5 * ${ spacing.base };
|
|
font-weight: ${ fontWeight.medium };
|
|
line-height: ${ lineHeight.sm };
|
|
margin-top: 0;
|
|
`,
|
|
h3: `
|
|
--e-styles-heading-font-size: ${ heading.h3 };
|
|
--e-styles-heading-margin-bottom: ${ spacing.base };
|
|
font-weight: ${ fontWeight.medium };
|
|
line-height: ${ lineHeight.sm };
|
|
margin-top: 0;
|
|
`,
|
|
h4: `
|
|
--e-styles-heading-font-size: ${ heading.h4 };
|
|
--e-styles-heading-margin-bottom: ${ spacing.base };
|
|
margin-top: 0;
|
|
`,
|
|
h5: `
|
|
--e-styles-heading-font-size: ${ heading.h5 };
|
|
--e-styles-heading-margin-bottom: ${ spacing.base };
|
|
margin-top: 0;
|
|
`,
|
|
h6: `
|
|
--e-styles-heading-font-size: ${ heading.h6 };
|
|
--e-styles-heading-margin-bottom: ${ spacing.base };
|
|
font-weight: ${ fontWeight.bold };
|
|
margin-top: 0;
|
|
`,
|
|
'display-1': `
|
|
--e-styles-heading-font-size: ${ heading.display1 };
|
|
--e-styles-heading-margin-bottom: ${ spacing.base };
|
|
margin-top: ${ spacing.base };
|
|
`,
|
|
'display-2': `
|
|
--e-styles-heading-font-size: ${ heading.display2 };
|
|
--e-styles-heading-margin-bottom: ${ spacing.base };
|
|
margin-top: ${ spacing.base };
|
|
`,
|
|
'display-3': `
|
|
--e-styles-heading-font-size: ${ heading.display3 };
|
|
--e-styles-heading-margin-bottom: 2.5 * ${ spacing.base };
|
|
margin-top: 0;
|
|
`,
|
|
'display-4': `
|
|
--e-styles-heading-font-size: ${ heading.display4 };
|
|
--e-styles-heading-margin-bottom: ${ spacing.base };
|
|
margin-top: ${ spacing.base };
|
|
`,
|
|
},
|
|
size: `--size-value: default;`,
|
|
},
|
|
light: {
|
|
variant: {
|
|
h1: `--e-styles-heading-color: ${ tints[ '600' ] };`,
|
|
h2: `--e-styles-heading-color: ${ tints[ '600' ] };`,
|
|
'display-3': `--e-styles-heading-color: ${ tints[ '600' ] };`,
|
|
},
|
|
},
|
|
dark: `--e-styles-heading-color: ${ darkTints[ '100' ] };`,
|
|
};
|