aboutsummaryrefslogtreecommitdiff
path: root/src/ui/c-button
diff options
context:
space:
mode:
Diffstat (limited to 'src/ui/c-button')
-rw-r--r--src/ui/c-button/c-button.demo.vue29
-rw-r--r--src/ui/c-button/c-button.theme.ts292
-rw-r--r--src/ui/c-button/c-button.vue5
3 files changed, 96 insertions, 230 deletions
diff --git a/src/ui/c-button/c-button.demo.vue b/src/ui/c-button/c-button.demo.vue
new file mode 100644
index 0000000..988659f
--- /dev/null
+++ b/src/ui/c-button/c-button.demo.vue
@@ -0,0 +1,29 @@
+<template>
+ <div v-for="buttonVariant of buttonVariants" :key="buttonVariant">
+ <h2>{{ _.capitalize(buttonVariant) }}</h2>
+
+ <c-button v-for="buttonType of buttonTypes" :key="buttonType" :variant="buttonVariant" :type="buttonType" mx-1>
+ Button
+ </c-button>
+
+ <c-button
+ v-for="buttonType of buttonTypes"
+ :key="buttonType"
+ :variant="buttonVariant"
+ :type="buttonType"
+ circle
+ mx-1
+ >
+ A
+ </c-button>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import _ from 'lodash';
+
+const buttonVariants = ['basic', 'text'];
+const buttonTypes = ['default', 'primary'];
+</script>
+
+<style lang="less" scoped></style>
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' }),
});
diff --git a/src/ui/c-button/c-button.vue b/src/ui/c-button/c-button.vue
index f52a069..2cbc4fd 100644
--- a/src/ui/c-button/c-button.vue
+++ b/src/ui/c-button/c-button.vue
@@ -14,6 +14,7 @@
<script lang="ts" setup>
import type { RouteLocationRaw } from 'vue-router';
import { useTheme } from './c-button.theme';
+import { useAppTheme } from '../theme/themes';
const props = withDefaults(
defineProps<{
@@ -56,11 +57,11 @@ const tag = computed(() => {
}
return 'button';
});
+const appTheme = useAppTheme();
</script>
<style lang="less" scoped>
.c-button {
- margin: 0;
line-height: 1;
font-family: inherit;
font-size: inherit;
@@ -103,7 +104,7 @@ const tag = computed(() => {
}
&:focus {
- outline: 2px solid v-bind('variantTheme.outline.color');
+ outline: 1px solid v-bind('appTheme.primary.color');
}
&.disabled {
generated by cgit v1.2.3 (git 2.39.1) at 2025-07-31 17:37:22 +0000