refactor(ui): getting ride of naive ui buttons

1 files changed, 240 insertions, 0 deletions

diff --git a/src/ui/c-button/c-button.theme.ts b/src/ui/c-button/c-button.theme.ts
new file mode 100644
index 0000000..2f25e6f
--- /dev/null
+++ b/src/ui/c-button/c-button.theme.ts
@@ -0,0 +1,240 @@
+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,
+        },
+      },
+    },
+  },
+});