3 files changed, 22 insertions, 10 deletions
diff --git a/src/ui/c-button/c-button.demo.vue b/src/ui/c-button/c-button.demo.vue
index 4e9aa1a..ce339f5 100644
--- a/src/ui/c-button/c-button.demo.vue
+++ b/src/ui/c-button/c-button.demo.vue
@@ -25,6 +25,18 @@
       >
         A
       </c-button>
+
+      <c-button
+        v-for="buttonType of buttonTypes"
+        :key="buttonType"
+        :variant="buttonVariant"
+        :type="buttonType"
+        :size="buttonSize"
+        circle
+        mx-1
+      >
+        <icon-mdi-content-copy />
+      </c-button>
     </div>
   </div>
 </template>
@@ -33,7 +45,7 @@
 import _ from 'lodash';
 
 const buttonVariants = ['basic', 'text'] as const;
-const buttonTypes = ['default', 'primary'] as const;
+const buttonTypes = ['default', 'primary', 'warning'] as const;
 const buttonSizes = ['small', 'medium', 'large'] as const;
 </script>
 
diff --git a/src/ui/c-button/c-button.theme.ts b/src/ui/c-button/c-button.theme.ts
index e96ac56..5b4c26f 100644
--- a/src/ui/c-button/c-button.theme.ts
+++ b/src/ui/c-button/c-button.theme.ts
@@ -56,10 +56,10 @@ const createTheme = ({ style }: { style: 'light' | 'dark' }) => {
         pressedBackground: darken(theme.primary.colorFaded, 30),
       }),
       warning: createState({
-        textColor: theme.text.baseColor,
-        backgroundColor: theme.warning.color,
-        hoverBackground: theme.warning.colorHover,
-        pressedBackground: theme.warning.colorPressed,
+        textColor: theme.warning.color,
+        backgroundColor: theme.warning.colorFaded,
+        hoverBackground: lighten(theme.warning.colorFaded, 30),
+        pressedBackground: darken(theme.warning.colorFaded, 30),
       }),
     },
     text: {
@@ -76,10 +76,10 @@ const createTheme = ({ style }: { style: 'light' | 'dark' }) => {
         pressedBackground: darken(theme.primary.colorFaded, 30),
       }),
       warning: createState({
-        textColor: theme.text.baseColor,
-        backgroundColor: theme.warning.color,
-        hoverBackground: theme.warning.colorHover,
-        pressedBackground: theme.warning.colorPressed,
+        textColor: darken(theme.warning.color, 20),
+        backgroundColor: 'transparent',
+        hoverBackground: theme.warning.colorFaded,
+        pressedBackground: darken(theme.warning.colorFaded, 30),
       }),
     },
   };
diff --git a/src/ui/c-button/c-button.vue b/src/ui/c-button/c-button.vue
index c17b078..121a1e9 100644
--- a/src/ui/c-button/c-button.vue
+++ b/src/ui/c-button/c-button.vue
@@ -18,7 +18,7 @@ import { useAppTheme } from '../theme/themes';
 
 const props = withDefaults(
   defineProps<{
-    type?: 'default' | 'primary';
+    type?: 'default' | 'primary' | 'warning';
     variant?: 'basic' | 'text';
     disabled?: boolean;
     round?: boolean;