chore: export theme red by default

Author: quangtuanitmo18

@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

@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"
     },

@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';

@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<{
     /**

@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',
       ],
     },
   },

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';