wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add and modify CSS vars for fonts

Browse source
This commit is contained in:
Prasanta Kumar Dutta 2023-01-03 13:02:57 +05:30
parent a233daa83b
commit e3c74f9b81
3 changed files with 89 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/components/Theme/@types/component.ts
View file

@ -1,3 +1,20 @@
interface Scale {
'size-base': number,
'size-1': string,
'size-2': string,
'size-3': string,
'size-4': string,
'size-5': string,
'size-6': string,
}
interface Fontface {
'display': string,
'serif': string,
'sans-serif': string,
'monospace': string,
}
interface Colour {
background: string;
'text-primary': string;
@ -9,22 +26,30 @@ interface Colour {
};
interface Font {
'size-base': string;
'family-serif': string,
'family-sans-serif': string,
'family-monospace': string,
'family-hed': string;
'family-subhed': string;
'family-body': string;
'family-note': string;
'size-hed': string;
'size-subhed-1': string;
'size-subhed-2': string;
'size-subhed-3': string;
'size-body': string;
'size-note-1': string;
'size-note-2': string;
'size-note-3': string;
}
export interface Theme {
scale: Scale,
fontface: Fontface
colour: Colour,
font: Font;
};
export interface CustomTheme {
scale?: Partial<Scale>,
fontface?: Partial<Fontface>,
colour?: Partial<Colour>,
font?: Partial<Font>
}

41
src/components/Theme/themes/dark.js
View file

@ -1,5 +1,35 @@
/** @type {import('../@types/component').Theme} */
export default {
scale: {
'size-base': 1.375,
'size-1': 'calc(var(--theme-scale-size-base) * 2.25rem)',
'size-2': 'calc(var(--theme-scale-size-base) * 1.5rem)',
'size-3': 'calc(var(--theme-scale-size-base) * 1rem)',
'size-4': 'calc(var(--theme-scale-size-base) * 0.9rem)',
'size-5': 'calc(var(--theme-scale-size-base) * 0.72rem)',
'size-6': 'calc(var(--theme-scale-size-base) * 0.66rem)',
},
fontface: {
display: 'Knowledge, sans-serif',
serif: 'freight-book, serif',
'sans-serif': 'Knowledge, sans-serif',
monospace:
'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
},
font: {
'family-hed': 'var(--theme-fontface-display)',
'family-subhed': 'var(--theme-fontface-sans-serif)',
'family-body': 'var(--theme-fontface-serif)',
'family-note': 'var(--theme-fontface-sans-serif)',
'size-hed': 'var(--theme-scale-size-1)',
'size-subhed-1': 'var(--theme-scale-size-2)',
'size-subhed-2': 'var(--theme-scale-size-3)',
'size-subhed-3': 'var(--theme-scale-size-6)',
'size-body': 'var(--theme-scale-size-3)',
'size-note-1': 'var(--theme-scale-size-4)',
'size-note-2': 'var(--theme-scale-size-5)',
'size-note-3': 'var(--theme-scale-size-6)',
},
colour: {
background: '#2e3440',
'text-primary': '#ffffff',
@ -9,15 +39,4 @@ export default {
'brand-rules': 'rgb(255 255 255 / 25%)',
'brand-shadow': 'rgb(255 255 255 / 10%)',
},
font: {
'size-base': '1.375',
'family-serif': 'freight-book, serif',
'family-sans-serif': 'Knowledge, sans-serif',
'family-monospace':
'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
'family-hed': 'var(--theme-font-family-sans-serif)',
'family-subhed': 'var(--theme-font-family-sans-serif)',
'family-body': 'var(--theme-font-family-serif)',
'family-note': 'var(--theme-font-family-sans-serif)',
},
};

41
src/components/Theme/themes/light.js
View file

@ -1,4 +1,34 @@
export default {
scale: {
'size-base': 1.375,
'size-1': 'calc(var(--theme-scale-size-base) * 2.25rem)',
'size-2': 'calc(var(--theme-scale-size-base) * 1.5rem)',
'size-3': 'calc(var(--theme-scale-size-base) * 1rem)',
'size-4': 'calc(var(--theme-scale-size-base) * 0.9rem)',
'size-5': 'calc(var(--theme-scale-size-base) * 0.72rem)',
'size-6': 'calc(var(--theme-scale-size-base) * 0.66rem)',
},
fontface: {
display: 'Knowledge, sans-serif',
serif: 'freight-book, serif',
'sans-serif': 'Knowledge, sans-serif',
monospace:
'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
},
font: {
'family-hed': 'var(--theme-fontface-display)',
'family-subhed': 'var(--theme-fontface-sans-serif)',
'family-body': 'var(--theme-fontface-serif)',
'family-note': 'var(--theme-fontface-sans-serif)',
'size-hed': 'var(--theme-scale-size-1)',
'size-subhed-1': 'var(--theme-scale-size-2)',
'size-subhed-2': 'var(--theme-scale-size-3)',
'size-subhed-3': 'var(--theme-scale-size-6)',
'size-body': 'var(--theme-scale-size-3)',
'size-note-1': 'var(--theme-scale-size-4)',
'size-note-2': 'var(--theme-scale-size-5)',
'size-note-3': 'var(--theme-scale-size-6)',
},
colour: {
background: '#ffffff',
'text-primary': '#404040',
@ -8,15 +38,4 @@ export default {
'brand-rules': '#d0d0d0',
'brand-shadow': 'rgb(64 64 64 / 80%)',
},
font: {
'size-base': '1.375',
'family-serif': 'freight-book, serif',
'family-sans-serif': 'Knowledge, sans-serif',
'family-monospace':
'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
'family-hed': 'var(--theme-font-family-sans-serif)',
'family-subhed': 'var(--theme-font-family-sans-serif)',
'family-body': 'var(--theme-font-family-serif)',
'family-note': 'var(--theme-font-family-sans-serif)',
},
};