mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-05-09 07:35:01 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(ui-lib): demo pages for c-lib components

Browse source
This commit is contained in:
Corentin Thomasset 2023-04-23 22:26:32 +02:00 • committed by Corentin THOMASSET
parent e88c1d5f2c
commit 92bd83536f
14 changed files with 294 additions and 248 deletions
Download patch file Download diff file Expand all files Collapse all files

308
src/ui/c-button/c-button.theme.ts
View file

@ -1,240 +1,76 @@
import { darken, lighten } from '../color/color.models';
import { defineThemes } from '../theme/theme.models';
import { appThemes } from '../theme/themes';
export const { useTheme } = defineThemes({
dark: {
basic: {
default: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: 'rgba(255, 255, 255, 0.08)',
hover: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: 'rgba(255, 255, 255, 0.12)',
},
pressed: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: 'rgba(255, 255, 255, 0.24)',
},
outline: {
color: appThemes.dark.primary.color,
},
},
primary: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: appThemes.dark.primary.color,
hover: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: appThemes.dark.primary.colorHover,
},
pressed: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: appThemes.dark.primary.colorPressed,
},
outline: {
color: appThemes.dark.primary.color,
},
},
warning: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: appThemes.dark.warning.color,
hover: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: appThemes.dark.warning.colorHover,
},
pressed: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: appThemes.dark.warning.colorPressed,
},
outline: {
color: appThemes.dark.warning.color,
},
},
},
text: {
default: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: 'transparent',
hover: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: 'rgba(255, 255, 255, 0.12)',
},
pressed: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: 'rgba(255, 255, 255, 0.82)',
},
outline: {
color: appThemes.dark.primary.color,
},
},
primary: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: appThemes.dark.primary.color,
hover: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: appThemes.dark.primary.colorHover,
},
pressed: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: appThemes.dark.primary.colorPressed,
},
outline: {
color: appThemes.dark.primary.color,
},
},
warning: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: appThemes.dark.warning.color,
hover: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: appThemes.dark.warning.colorHover,
},
pressed: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: appThemes.dark.warning.colorPressed,
},
outline: {
color: appThemes.dark.warning.color,
},
},
},
},
light: {
basic: {
default: {
textColor: appThemes.light.text.baseColor,
backgroundColor: 'rgba(46, 51, 56, 0.05)',
hover: {
textColor: appThemes.light.text.baseColor,
backgroundColor: 'rgba(46, 51, 56, 0.09)',
},
pressed: {
textColor: appThemes.light.text.baseColor,
backgroundColor: 'rgba(46, 51, 56, 0.22)',
},
outline: {
color: appThemes.light.primary.color,
},
},
primary: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: appThemes.light.primary.color,
hover: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: appThemes.light.primary.colorHover,
},
pressed: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: appThemes.light.primary.colorPressed,
},
outline: {
color: appThemes.light.primary.color,
},
},
warning: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: appThemes.light.warning.color,
hover: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: appThemes.light.warning.colorHover,
},
pressed: {
textColor: appThemes.dark.text.baseColor,
backgroundColor: appThemes.light.warning.colorPressed,
},
outline: {
color: appThemes.light.warning.color,
},
},
},
text: {
default: {
textColor: appThemes.light.text.baseColor,
backgroundColor: 'transparent',
hover: {
textColor: appThemes.light.text.baseColor,
backgroundColor: 'rgba(46, 51, 56, 0.09)',
},
pressed: {
textColor: appThemes.light.text.baseColor,
backgroundColor: 'rgba(46, 51, 56, 0.13)',
},
outline: {
color: appThemes.light.primary.color,
},
},
primary: {
textColor: appThemes.light.primary.color,
backgroundColor: 'transparent',
hover: {
textColor: appThemes.light.primary.colorHover,
backgroundColor: 'rgba(46, 51, 56, 0.09)',
},
pressed: {
textColor: appThemes.light.primary.colorPressed,
backgroundColor: 'rgba(46, 51, 56, 0.13)',
},
outline: {
color: appThemes.light.primary.color,
},
},
warning: {
textColor: appThemes.light.warning.color,
backgroundColor: 'transparent',
hover: {
textColor: appThemes.light.warning.colorHover,
backgroundColor: 'rgba(46, 51, 56, 0.09)',
},
pressed: {
textColor: appThemes.light.warning.colorPressed,
backgroundColor: 'rgba(46, 51, 56, 0.13)',
},
outline: {
color: appThemes.light.warning.color,
},
},
},
},
const createState = ({
textColor,
backgroundColor,
hoverBackground,
hoveredTextColor = textColor,
pressedBackground,
pressedTextColor = textColor,
}: {
textColor: string;
backgroundColor: string;
hoverBackground: string;
hoveredTextColor?: string;
pressedBackground: string;
pressedTextColor?: string;
}) => ({
textColor,
backgroundColor,
hover: { textColor: hoveredTextColor, backgroundColor: hoverBackground },
pressed: { textColor: pressedTextColor, backgroundColor: pressedBackground },
});
const createTheme = ({ style }: { style: 'light' | 'dark' }) => {
const theme = appThemes[style];
return {
basic: {
default: createState({
textColor: theme.text.baseColor,
backgroundColor: theme.default.color,
hoverBackground: theme.default.colorHover,
pressedBackground: theme.default.colorPressed,
}),
primary: createState({
textColor: theme.primary.color,
backgroundColor: theme.primary.colorFaded,
hoverBackground: lighten(theme.primary.colorFaded, 30),
pressedBackground: darken(theme.primary.colorFaded, 30),
}),
warning: createState({
textColor: theme.text.baseColor,
backgroundColor: theme.warning.color,
hoverBackground: theme.warning.colorHover,
pressedBackground: theme.warning.colorPressed,
}),
},
text: {
default: createState({
textColor: theme.text.baseColor,
backgroundColor: 'transparent',
hoverBackground: theme.default.colorHover,
pressedBackground: theme.default.colorPressed,
}),
primary: createState({
textColor: theme.primary.color,
backgroundColor: 'transparent',
hoverBackground: theme.primary.colorFaded,
pressedBackground: darken(theme.primary.colorFaded, 30),
}),
warning: createState({
textColor: theme.text.baseColor,
backgroundColor: theme.warning.color,
hoverBackground: theme.warning.colorHover,
pressedBackground: theme.warning.colorPressed,
}),
},
};
};
export const { useTheme } = defineThemes({
dark: createTheme({ style: 'dark' }),
light: createTheme({ style: 'light' }),
});