antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 10:53:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Migrate to Mantine v8 and Design Changes (#961)

Browse source 
* mantine v8 migration

* various design changes and improvements
This commit is contained in:
Jeff 2025-06-24 00:04:36 -07:00 • committed by GitHub
parent bea55d48a8
commit c1330d92b2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
473 changed files with 12469 additions and 11607 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/shared/themes/app-theme-types.ts Normal file
View file

@ -0,0 +1,45 @@
import type { MantineThemeOverride } from '@mantine/core';
import { CSSProperties } from 'react';
export enum AppTheme {
DEFAULT_DARK = 'defaultDark',
DEFAULT_LIGHT = 'defaultLight',
}
export type AppThemeConfiguration = Partial<BaseAppThemeConfiguration>;
export interface BaseAppThemeConfiguration {
app: {
'overlay-header'?: CSSProperties['background'];
'overlay-subheader'?: CSSProperties['background'];
'root-font-size'?: CSSProperties['fontSize'];
'scrollbar-handle-active-background'?: CSSProperties['background'];
'scrollbar-handle-background'?: CSSProperties['background'];
'scrollbar-handle-border-radius'?: CSSProperties['borderRadius'];
'scrollbar-handle-hover-background'?: CSSProperties['background'];
'scrollbar-size'?: CSSProperties['width'];
'scrollbar-track-active-background'?: CSSProperties['background'];
'scrollbar-track-background'?: CSSProperties['background'];
'scrollbar-track-border-radius'?: CSSProperties['borderRadius'];
'scrollbar-track-hover-background'?: CSSProperties['background'];
};
colors: {
background?: CSSProperties['background'];
'background-alternate'?: CSSProperties['background'];
black?: CSSProperties['color'];
foreground?: CSSProperties['color'];
'foreground-muted'?: CSSProperties['color'];
primary?: CSSProperties['color'];
'state-error'?: CSSProperties['color'];
'state-info'?: CSSProperties['color'];
'state-success'?: CSSProperties['color'];
'state-warning'?: CSSProperties['color'];
surface?: CSSProperties['background'];
'surface-foreground'?: CSSProperties['color'];
white?: CSSProperties['color'];
};
mantineOverride?: MantineThemeOverride;
mode: 'dark' | 'light';
stylesheets?: string[];
}

23
src/shared/themes/app-theme.ts Normal file
View file

@ -0,0 +1,23 @@
import merge from 'lodash/merge';
import { AppThemeConfiguration } from './app-theme-types';
import { AppTheme } from './app-theme-types';
import { defaultTheme } from '/@/shared/themes/default';
import { defaultDark } from '/@/shared/themes/default-dark/default-dark';
import { defaultLight } from '/@/shared/themes/default-light/default-light';
export const appTheme: Record<AppTheme, AppThemeConfiguration> = {
[AppTheme.DEFAULT_DARK]: defaultDark,
[AppTheme.DEFAULT_LIGHT]: defaultLight,
};
export const getAppTheme = (theme: AppTheme): AppThemeConfiguration => {
return {
app: merge({}, defaultTheme.app, appTheme[theme].app),
colors: merge({}, defaultTheme.colors, appTheme[theme].colors),
mantineOverride: merge({}, defaultTheme.mantineOverride, appTheme[theme].mantineOverride),
mode: appTheme[theme].mode,
stylesheets: appTheme[theme].stylesheets,
};
};

6
src/shared/themes/default-dark/default-dark.ts Normal file
View file

@ -0,0 +1,6 @@
import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
export const defaultDark: AppThemeConfiguration = {
app: {},
mode: 'dark',
};

33
src/shared/themes/default-light/default-light.ts Normal file
View file

@ -0,0 +1,33 @@
import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
export const defaultLight: AppThemeConfiguration = {
app: {
'overlay-header':
'linear-gradient(rgb(255 255 255 / 50%) 0%, rgb(255 255 255 / 80%)), var(--theme-background-noise)',
'overlay-subheader':
'linear-gradient(180deg, rgba(255, 255, 255, 5%) 0%, var(--theme-colors-background)), var(--theme-background-noise)',
'scrollbar-handle-background': 'rgba(140, 140, 140, 30%)',
'scrollbar-handle-hover-background': 'rgba(140, 140, 140, 60%)',
'scrollbar-track-background': 'transparent',
},
colors: {
background: 'rgb(255, 255, 255)',
'background-alternate': 'rgb(245, 245, 245)',
black: 'rgb(0, 0, 0)',
foreground: 'rgb(25, 25, 25)',
'foreground-muted': 'rgb(80, 80, 80)',
'state-error': 'rgb(255, 59, 48)',
'state-info': 'rgb(0, 122, 255)',
'state-success': 'rgb(48, 209, 88)',
'state-warning': 'rgb(255, 214, 0)',
surface: 'rgb(245, 245, 245)',
'surface-foreground': 'rgb(0, 0, 0)',
white: 'rgb(255, 255, 255)',
},
mantineOverride: {
primaryShade: {
light: 4,
},
},
mode: 'light',
};

35
src/shared/themes/default.ts Normal file
View file

@ -0,0 +1,35 @@
import { AppThemeConfiguration } from './app-theme-types';
export const defaultTheme: AppThemeConfiguration = {
app: {
'overlay-header':
'linear-gradient(transparent 0%, rgb(0 0 0 / 75%) 100%), var(--theme-background-noise)',
'overlay-subheader':
'linear-gradient(180deg, rgb(0 0 0 / 5%) 0%, var(--theme-colors-background) 100%), var(--theme-background-noise)',
'root-font-size': '16px',
'scrollbar-handle-active-background': 'rgba(160, 160, 160, 60%)',
'scrollbar-handle-background': 'rgba(160, 160, 160, 30%)',
'scrollbar-handle-border-radius': '0px',
'scrollbar-handle-hover-background': 'rgba(160, 160, 160, 60%)',
'scrollbar-size': '12px',
'scrollbar-track-active-background': 'transparent',
'scrollbar-track-background': 'transparent',
'scrollbar-track-border-radius': '0',
'scrollbar-track-hover-background': 'transparent',
},
colors: {
background: 'rgb(16, 16, 16)',
'background-alternate': 'rgb(0, 0, 0)',
black: 'rgb(0, 0, 0)',
foreground: 'rgb(225, 225, 225)',
'foreground-muted': 'rgb(150, 150, 150)',
'state-error': 'rgb(204, 50, 50)',
'state-info': 'rgb(53, 116, 252)',
'state-success': 'rgb(50, 204, 50)',
'state-warning': 'rgb(255, 120, 120)',
surface: 'rgb(24, 24, 24)',
'surface-foreground': 'rgb(215, 215, 215)',
white: 'rgb(255, 255, 255)',
},
mode: 'dark',
};