aboutsummaryrefslogtreecommitdiff
path: root/src/ui/c-button/c-button.theme.ts
diff options
context:
space:
mode:
Diffstat (limited to 'src/ui/c-button/c-button.theme.ts')
-rw-r--r--src/ui/c-button/c-button.theme.ts292
1 files changed, 64 insertions, 228 deletions
diff --git a/src/ui/c-button/c-button.theme.ts b/src/ui/c-button/c-button.theme.ts
index 2f25e6f..87ad89f 100644
--- a/src/ui/c-button/c-button.theme.ts
+++ b/src/ui/c-button/c-button.theme.ts
@@ -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,
- },
+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 },
+});
- pressed: {
- textColor: appThemes.dark.text.baseColor,
- backgroundColor: appThemes.dark.warning.colorPressed,
- },
+const createTheme = ({ style }: { style: 'light' | 'dark' }) => {
+ const theme = appThemes[style];
- outline: {
- color: appThemes.dark.warning.color,
- },
- },
- },
- },
- light: {
+ return {
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,
- },
- },
+ 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: {
- textColor: appThemes.light.text.baseColor,
+ default: createState({
+ textColor: theme.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,
+ hoverBackground: theme.default.colorHover,
+ pressedBackground: theme.default.colorPressed,
+ }),
+ primary: createState({
+ textColor: theme.primary.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,
- },
- },
+ 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' }),
});
generated by cgit v1.2.3 (git 2.39.1) at 2025-07-30 06:28:18 +0000