feat(new tool): camera screenshot and recorder

src/ui/c-alert/c-alert.demo.vue

@@ -0,0 +1,11 @@
+<template>
+  <c-alert v-for="variant in variants" :key="variant" :type="variant" mb-4>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni reprehenderit itaque enim? Suscipit magni optio velit
+    quia, eveniet repellat pariatur quaerat laudantium dignissimos natus, beatae deleniti adipisci, atque necessitatibus
+    odio!
+  </c-alert>
+</template>
+
+<script lang="ts" setup>
+const variants = ['warning'] as const;
+</script>

src/ui/c-alert/c-alert.theme.ts

@@ -0,0 +1,25 @@
+import { darken } from '../color/color.models';
+import { defineThemes } from '../theme/theme.models';
+import { appThemes } from '../theme/themes';
+
+// eslint-disable-next-line
+import WarningIcon from '~icons/mdi/alert-circle-outline';
+
+export const { useTheme } = defineThemes({
+  dark: {
+    warning: {
+      backgroundColor: appThemes.dark.warning.colorFaded,
+      borderColor: appThemes.dark.warning.color,
+      textColor: appThemes.dark.warning.color,
+      icon: WarningIcon,
+    },
+  },
+  light: {
+    warning: {
+      backgroundColor: appThemes.light.warning.colorFaded,
+      borderColor: appThemes.light.warning.color,
+      textColor: darken(appThemes.light.warning.color, 40),
+      icon: WarningIcon,
+    },
+  },
+});

src/ui/c-alert/c-alert.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="c-alert" flex items-center b-rd-4px pa-5>
+    <div class="c-alert--icon" mr-4 text-40px op-60>
+      <slot name="icon">
+        <component :is="variantTheme.icon" />
+      </slot>
+    </div>
+
+    <div class="c-alert--content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useTheme } from './c-alert.theme';
+
+const props = withDefaults(defineProps<{ type?: 'warning' }>(), { type: 'warning' });
+const { type } = toRefs(props);
+
+const theme = useTheme();
+const variantTheme = computed(() => theme.value[type.value]);
+</script>
+
+<style lang="less" scoped>
+.c-alert {
+  background-color: v-bind('variantTheme.backgroundColor');
+  color: v-bind('variantTheme.textColor');
+  font-size: inherit;
+  line-height: 20px;
+}
+</style>

src/ui/c-button/c-button.demo.vue

@@ -45,7 +45,7 @@
 import _ from 'lodash';
 
 const buttonVariants = ['basic', 'text'] as const;
-const buttonTypes = ['default', 'primary', 'warning'] as const;
+const buttonTypes = ['default', 'primary', 'warning', 'error'] as const;
 const buttonSizes = ['small', 'medium', 'large'] as const;
 </script>
 

src/ui/c-button/c-button.theme.ts

@@ -61,6 +61,12 @@ const createTheme = ({ style }: { style: 'light' | 'dark' }) => {
         hoverBackground: lighten(theme.warning.colorFaded, 30),
         pressedBackground: darken(theme.warning.colorFaded, 30),
       }),
+      error: createState({
+        textColor: theme.error.color,
+        backgroundColor: theme.error.colorFaded,
+        hoverBackground: lighten(theme.error.colorFaded, 30),
+        pressedBackground: darken(theme.error.colorFaded, 30),
+      }),
     },
     text: {
       default: createState({
@@ -81,6 +87,12 @@ const createTheme = ({ style }: { style: 'light' | 'dark' }) => {
         hoverBackground: theme.warning.colorFaded,
         pressedBackground: darken(theme.warning.colorFaded, 30),
       }),
+      error: createState({
+        textColor: darken(theme.error.color, 20),
+        backgroundColor: 'transparent',
+        hoverBackground: theme.error.colorFaded,
+        pressedBackground: darken(theme.error.colorFaded, 30),
+      }),
     },
   };
 };

src/ui/c-button/c-button.vue

@@ -18,7 +18,7 @@ import { useAppTheme } from '../theme/themes';
 
 const props = withDefaults(
   defineProps<{
-    type?: 'default' | 'primary' | 'warning';
+    type?: 'default' | 'primary' | 'warning' | 'error';
     variant?: 'basic' | 'text';
     disabled?: boolean;
     round?: boolean;