From 7175fa6ac8db980d8f9700990da8ffeafa93d68f Mon Sep 17 00:00:00 2001
From: quangtuanitmo18 <quangtuanitmo18@gmail.com>
Date: Sun, 1 Feb 2026 22:07:00 +0300
Subject: [PATCH 1/6] fix: cssmodule btn

---
 @codexteam/ui/src/vue/components/button/Button.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/@codexteam/ui/src/vue/components/button/Button.vue b/@codexteam/ui/src/vue/components/button/Button.vue
index 82e88d02..43e86cac 100644
--- a/@codexteam/ui/src/vue/components/button/Button.vue
+++ b/@codexteam/ui/src/vue/components/button/Button.vue
@@ -2,8 +2,8 @@
   <button
     :class="[
       $style.button,
-      `${$style.button}--${style}`,
-      iconType !== 'none' && `${$style.button}--icon-${iconType}`,
+      $style[`button--${style}`],
+      iconType !== 'none' && $style[`button--icon-${iconType}`],
 
       'text-ui-base-medium',
     ]"

From 775abcf509e73bc90a8a4f03465ac988f864449d Mon Sep 17 00:00:00 2001
From: quangtuanitmo18 <quangtuanitmo18@gmail.com>
Date: Sun, 1 Feb 2026 22:17:02 +0300
Subject: [PATCH 2/6] chore: impore theme red by default with btn

---
 @codexteam/ui/src/vue/components/button/Button.vue | 7 +++++++
 @codexteam/ui/vite.config.ts                       | 5 +++++
 2 files changed, 12 insertions(+)

diff --git a/@codexteam/ui/src/vue/components/button/Button.vue b/@codexteam/ui/src/vue/components/button/Button.vue
index 43e86cac..633b986a 100644
--- a/@codexteam/ui/src/vue/components/button/Button.vue
+++ b/@codexteam/ui/src/vue/components/button/Button.vue
@@ -25,6 +25,13 @@
 import { computed, defineProps, useSlots } from 'vue';
 import Icon from '../icon/Icon.vue';
 
+/**
+ * Import red theme for destructive button style.
+ * This is marked as external in vite config, so consumers need to import
+ * '@codexteam/ui/styles/themes/red' in their app.
+ */
+import '@codexteam/ui/styles/themes/red';
+
 const props = withDefaults(
   defineProps<{
     /**
diff --git a/@codexteam/ui/vite.config.ts b/@codexteam/ui/vite.config.ts
index 79326964..b1a70324 100644
--- a/@codexteam/ui/vite.config.ts
+++ b/@codexteam/ui/vite.config.ts
@@ -86,6 +86,11 @@ export default defineConfig({
         '@vueuse/shared',
         '@editorjs/editorjs',
         '@codexteam/icons',
+        /**
+         * Theme red is used by Button component for destructive style.
+         * Mark as external so it's not bundled into component but imported separately.
+         */
+        '@codexteam/ui/styles/themes/red',
       ],
     },
   },

From e6076e375471a1418bba8eafbc72d6ba76d972e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D1=82=D1=83=D0=B0=D0=BD?= <quangtuanitmo18@gmail.com>
Date: Wed, 4 Feb 2026 14:57:02 +0300
Subject: [PATCH 3/6] chore: change comments

---
 @codexteam/ui/src/vue/components/button/Button.vue | 4 +---
 @codexteam/ui/vite.config.ts                       | 6 ++++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/@codexteam/ui/src/vue/components/button/Button.vue b/@codexteam/ui/src/vue/components/button/Button.vue
index 633b986a..85f91e8a 100644
--- a/@codexteam/ui/src/vue/components/button/Button.vue
+++ b/@codexteam/ui/src/vue/components/button/Button.vue
@@ -26,9 +26,7 @@ import { computed, defineProps, useSlots } from 'vue';
 import Icon from '../icon/Icon.vue';
 
 /**
- * Import red theme for destructive button style.
- * This is marked as external in vite config, so consumers need to import
- * '@codexteam/ui/styles/themes/red' in their app.
+ * Red theme for destructive styles (auto-included, no manual import required by consumers).
  */
 import '@codexteam/ui/styles/themes/red';
 
diff --git a/@codexteam/ui/vite.config.ts b/@codexteam/ui/vite.config.ts
index b1a70324..e85945a4 100644
--- a/@codexteam/ui/vite.config.ts
+++ b/@codexteam/ui/vite.config.ts
@@ -87,8 +87,10 @@ export default defineConfig({
         '@editorjs/editorjs',
         '@codexteam/icons',
         /**
-         * Theme red is used by Button component for destructive style.
-         * Mark as external so it's not bundled into component but imported separately.
+         * Mark the red theme as external because it's imported inside the UI library itself (used for destructive buttons)
+         * This prevents Rollup from trying to bundle/resolve @codexteam/ui/styles/themes/red as an internal module.
+         * It also avoids Rollup silencing the "failed to resolve import" error.
+         * The actual CSS file is still emitted separately via the styles/themes/red CSS entry in rollupOptions.input.
          */
         '@codexteam/ui/styles/themes/red',
       ],

From 44865c6f734fb18f823243ccdc899603f78d2feb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D1=82=D1=83=D0=B0=D0=BD?= <quangtuanitmo18@gmail.com>
Date: Wed, 4 Feb 2026 15:32:37 +0300
Subject: [PATCH 4/6] chore: try building on vercel

---
 @codexteam/ui/package.json                         | 3 +++
 @codexteam/ui/src/vue/components/button/Button.vue | 2 +-
 @codexteam/ui/vite.config.ts                       | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/@codexteam/ui/package.json b/@codexteam/ui/package.json
index ed95f246..27c42357 100644
--- a/@codexteam/ui/package.json
+++ b/@codexteam/ui/package.json
@@ -39,6 +39,9 @@
     "./styles/themes/red": {
       "import": "./dist/styles/themes/red.css"
     },
+    "./styles/themes/red.css": {
+      "import": "./dist/styles/themes/red.css"
+    },
     "./styles/themes/violet": {
       "import": "./dist/styles/themes/violet.css"
     },
diff --git a/@codexteam/ui/src/vue/components/button/Button.vue b/@codexteam/ui/src/vue/components/button/Button.vue
index 85f91e8a..3f8aff87 100644
--- a/@codexteam/ui/src/vue/components/button/Button.vue
+++ b/@codexteam/ui/src/vue/components/button/Button.vue
@@ -28,7 +28,7 @@ import Icon from '../icon/Icon.vue';
 /**
  * Red theme for destructive styles (auto-included, no manual import required by consumers).
  */
-import '@codexteam/ui/styles/themes/red';
+import '@codexteam/ui/styles/themes/red.css';
 
 const props = withDefaults(
   defineProps<{
diff --git a/@codexteam/ui/vite.config.ts b/@codexteam/ui/vite.config.ts
index e85945a4..fc6bad3b 100644
--- a/@codexteam/ui/vite.config.ts
+++ b/@codexteam/ui/vite.config.ts
@@ -93,6 +93,7 @@ export default defineConfig({
          * The actual CSS file is still emitted separately via the styles/themes/red CSS entry in rollupOptions.input.
          */
         '@codexteam/ui/styles/themes/red',
+        '@codexteam/ui/styles/themes/red.css',
       ],
     },
   },

From a105034f8b948f6c386fe3de2584d8eada8f970b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D1=82=D1=83=D0=B0=D0=BD?= <quangtuanitmo18@gmail.com>
Date: Wed, 4 Feb 2026 17:07:25 +0300
Subject: [PATCH 5/6] chore: export theme red by default

---
 @codexteam/ui/README.md                            |  3 +++
 @codexteam/ui/package.json                         |  8 +-------
 @codexteam/ui/src/styles/index.pcss                |  4 ++++
 @codexteam/ui/src/vue/components/button/Button.vue |  5 -----
 @codexteam/ui/vite.config.ts                       | 12 +-----------
 src/index.ts                                       |  1 -
 6 files changed, 9 insertions(+), 24 deletions(-)

diff --git a/@codexteam/ui/README.md b/@codexteam/ui/README.md
index a2cc8174..67fb9308 100644
--- a/@codexteam/ui/README.md
+++ b/@codexteam/ui/README.md
@@ -47,6 +47,9 @@ import '@codexteam/ui/styles/themes/grass';
 
 **Available themes:** `graphite`, `crimson`, `red`, `violet`, `grass`, `amber`, `pure`, `sky`
 
+> **Note:** the **red** theme is included to the library out of the box since it is used for destructive-action styles.
+> You don't need to import **@codexteam/ui/styles/themes/red** manually in your app.
+
 ### 4. Import Components (Tree-shakeable)
 
 ```typescript
diff --git a/@codexteam/ui/package.json b/@codexteam/ui/package.json
index 27c42357..53ccd0a3 100644
--- a/@codexteam/ui/package.json
+++ b/@codexteam/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@codexteam/ui",
-  "version": "0.2.0-rc.4",
+  "version": "0.2.0-rc.5",
   "type": "module",
   "sideEffects": [
     "*.css",
@@ -36,12 +36,6 @@
     "./styles/themes/crimson": {
       "import": "./dist/styles/themes/crimson.css"
     },
-    "./styles/themes/red": {
-      "import": "./dist/styles/themes/red.css"
-    },
-    "./styles/themes/red.css": {
-      "import": "./dist/styles/themes/red.css"
-    },
     "./styles/themes/violet": {
       "import": "./dist/styles/themes/violet.css"
     },
diff --git a/@codexteam/ui/src/styles/index.pcss b/@codexteam/ui/src/styles/index.pcss
index 70369e9a..d57ad4db 100644
--- a/@codexteam/ui/src/styles/index.pcss
+++ b/@codexteam/ui/src/styles/index.pcss
@@ -2,3 +2,7 @@
 @import './typography.pcss';
 @import './mixins.pcss';
 @import './z-axis.pcss';
+/**
+ * Import 'red' theme by default since it is used for desctructive-action styles
+ */
+@import './themes/red.pcss';
diff --git a/@codexteam/ui/src/vue/components/button/Button.vue b/@codexteam/ui/src/vue/components/button/Button.vue
index 3f8aff87..43e86cac 100644
--- a/@codexteam/ui/src/vue/components/button/Button.vue
+++ b/@codexteam/ui/src/vue/components/button/Button.vue
@@ -25,11 +25,6 @@
 import { computed, defineProps, useSlots } from 'vue';
 import Icon from '../icon/Icon.vue';
 
-/**
- * Red theme for destructive styles (auto-included, no manual import required by consumers).
- */
-import '@codexteam/ui/styles/themes/red.css';
-
 const props = withDefaults(
   defineProps<{
     /**
diff --git a/@codexteam/ui/vite.config.ts b/@codexteam/ui/vite.config.ts
index fc6bad3b..eecc9051 100644
--- a/@codexteam/ui/vite.config.ts
+++ b/@codexteam/ui/vite.config.ts
@@ -56,7 +56,6 @@ export default defineConfig({
          */
         'styles/themes/graphite': resolve(__dirname, 'src/styles/themes/graphite.pcss'),
         'styles/themes/crimson': resolve(__dirname, 'src/styles/themes/crimson.pcss'),
-        'styles/themes/red': resolve(__dirname, 'src/styles/themes/red.pcss'),
         'styles/themes/violet': resolve(__dirname, 'src/styles/themes/violet.pcss'),
         'styles/themes/grass': resolve(__dirname, 'src/styles/themes/grass.pcss'),
         'styles/themes/amber': resolve(__dirname, 'src/styles/themes/amber.pcss'),
@@ -78,22 +77,13 @@ export default defineConfig({
         preserveModules: true,
         preserveModulesRoot: 'src',
       },
-      // make sure to externalize deps that shouldn't be bundled
-      // into your library
+      // make sure to externalize deps that shouldn't be bundled into your library
       external: [
         'vue',
         '@vueuse/core',
         '@vueuse/shared',
         '@editorjs/editorjs',
         '@codexteam/icons',
-        /**
-         * Mark the red theme as external because it's imported inside the UI library itself (used for destructive buttons)
-         * This prevents Rollup from trying to bundle/resolve @codexteam/ui/styles/themes/red as an internal module.
-         * It also avoids Rollup silencing the "failed to resolve import" error.
-         * The actual CSS file is still emitted separately via the styles/themes/red CSS entry in rollupOptions.input.
-         */
-        '@codexteam/ui/styles/themes/red',
-        '@codexteam/ui/styles/themes/red.css',
       ],
     },
   },
diff --git a/src/index.ts b/src/index.ts
index 60843b5c..fbf6579b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -10,7 +10,6 @@ import '@codexteam/ui/styles/themes/graphite';
 import '@codexteam/ui/styles/themes/sky';
 import '@codexteam/ui/styles/themes/crimson';
 import '@codexteam/ui/styles/themes/grass';
-import '@codexteam/ui/styles/themes/red';
 import '@codexteam/ui/styles/themes/violet';
 import '@codexteam/ui/styles/themes/amber';
 import '@codexteam/ui/styles/themes/pure';

From dd1719460882f6bee6dca6a881dc575fe77b23d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D1=82=D1=83=D0=B0=D0=BD?= <quangtuanitmo18@gmail.com>
Date: Wed, 4 Feb 2026 17:10:38 +0300
Subject: [PATCH 6/6] chore: change ver package

---
 @codexteam/ui/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/@codexteam/ui/package.json b/@codexteam/ui/package.json
index 53ccd0a3..b8672454 100644
--- a/@codexteam/ui/package.json
+++ b/@codexteam/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@codexteam/ui",
-  "version": "0.2.0-rc.5",
+  "version": "0.2.1",
   "type": "module",
   "sideEffects": [
     "*.css",