refactor(rolldown): theme (#233)

Author: webfansplz

packages/rolldown/src/app/components/visual/LogoBanner.vue

@@ -7,8 +7,8 @@ const theme = computed(() => isDark.value ? 'white' : '#08060E')
 
 <template>
   <div class="flex gap-2 group" w140 p4 relative>
-    <div op10 group-hover="op100" transition duration-800 class="absolute -bottom-[10px] -left-[20px] w-[80px] h-[80px] bg-linear-to-b from-[#61d9ff] to-transparent blur-[30px]" />
-    <div op10 group-hover="op100" transition duration-800 class="absolute -top-[10px] left-300px w-[80px] h-[80px] bg-[linear-gradient(270deg,_#7a23a1,_#715ebde6_60%,_#715ebde6,_#bd34fe00)] blur-[30px]" />
+    <div op10 group-hover="op100" transition duration-800 class="absolute -bottom-[10px] -left-[20px] w-[80px] h-[80px] bg-linear-to-b from-[#ff4100] to-transparent blur-[30px]" />
+    <div op10 group-hover="op100" transition duration-800 class="absolute -top-[10px] left-300px w-[80px] h-[80px] bg-[linear-gradient(270deg,_#ff00b3,_#ff00b3cc_60%,_#ff4100cc,_#ff410000)] blur-[30px]" />
     <svg width="1123" height="47" viewBox="0 0 1123 47" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g clip-path="url(#clip0_12_249)">
         <path d="M84.875 0C103.939 0 113.956 8.014 113.956 23.395C113.956 38.776 103.939 46.789 84.875 46.789C65.811 46.789 55.859 38.775 55.858 23.395C55.858 8.014 65.811 0 84.875 0ZM304.339 0C323.403 0 333.42 8.014 333.42 23.395C333.42 38.776 323.403 46.789 304.339 46.789C285.275 46.789 275.322 38.775 275.322 23.395C275.322 8.014 285.274 0 304.339 0ZM35.349 0.775C45.689 0.775 51.571 6.139 51.571 15.575C51.571 21.003 48.986 25.01 44.98 27.337L51.765 46.013H35.285L30.567 31.343H15.51V46.013H0V0.775H35.349ZM135.411 34.705H162.488V46.013H119.9V0.775H135.411V34.705ZM183.791 34.705H210.869V46.013H168.281V0.775H183.791V34.705ZM245.53 0.774C261.234 0.774 270.217 7.884 270.217 23.394C270.217 38.904 261.169 46.012 245.465 46.012H217.095V0.775L245.53 0.774ZM356.661 31.86L363.253 8.854H380.637L387.616 32.764L393.109 0.776H408.232L398.926 46.014H379.345L371.849 20.423L364.546 46.013H344.899L335.594 0.776H350.975L356.661 31.86ZM432.876 0.775L451.553 30.18H451.682V0.775H466.417V46.013H447.805L428.999 16.48H428.805V46.013H414.135V0.775H432.876ZM84.875 11.115C75.892 11.115 71.691 14.993 71.691 23.395C71.691 31.795 75.892 35.608 84.875 35.608C93.858 35.608 98.058 31.86 98.058 23.395C98.058 14.93 93.858 11.115 84.875 11.115ZM304.339 11.115C295.356 11.115 291.155 14.993 291.155 23.395C291.155 31.795 295.356 35.608 304.339 35.608C313.322 35.608 317.522 31.86 317.522 23.395C317.522 14.93 313.322 11.115 304.339 11.115ZM232.604 35.026H243.333C250.7 35.026 254.318 31.86 254.318 23.394C254.318 14.928 250.7 11.762 243.333 11.762H232.604V35.026ZM15.51 20.68H30.955C34.122 20.68 35.673 19 35.673 16.027C35.673 13.054 34.122 11.438 30.955 11.438H15.51V20.68Z" :fill="theme" />

packages/rolldown/src/app/utils/color.ts

@@ -23,6 +23,7 @@ export const predefinedColorMap = {
   vite: 250,
   vite1: 240,
   vite2: 120,
+  rolldown: 18,
   virtual: 160,
   nuxt: 140,
 } as Record<string, number>

packages/rolldown/src/uno.config.ts

@@ -6,6 +6,24 @@ import { defineConfig } from 'unocss'
 export default defineConfig({
   presets: [
     presetDevToolsUI({
+      theme: {
+        colors: {
+          primary: {
+            50: '#fff5f1',
+            100: '#ffe8e0',
+            200: '#ffd1bf',
+            300: '#ffb08f',
+            400: '#ff8454',
+            DEFAULT: '#ff4100',
+            500: '#ff5f26',
+            600: '#ff4100',
+            700: '#db3300',
+            800: '#b82a00',
+            900: '#942300',
+            950: '#5f1400',
+          },
+        },
+      },
       webFonts: {
         processors: createLocalFontProcessor({
           fontAssetsDir: fileURLToPath(new URL('./app/public/fonts', import.meta.url)),

packages/ui/src/unocss/index.ts

@@ -12,18 +12,19 @@ import {
   transformerVariantGroup,
 } from 'unocss'
 import { shortcuts } from './shortcuts'
-import { theme } from './theme'
+import { theme as devtoolsDefaultTheme } from './theme'
 
 export interface PresetDevToolsUIOptions {
   webFonts?: WebFontsOptions
+  theme?: Theme
 }
 
 export const presetDevToolsUI = definePreset<PresetDevToolsUIOptions, Theme>((options) => {
   return {
     name: '@vitejs/devtools-ui/preset',
     shortcuts,
     extendTheme(defaultTheme) {
-      return mergeDeep(defaultTheme, theme)
+      return mergeDeep(defaultTheme, options?.theme ?? devtoolsDefaultTheme)
     },
     presets: [
       presetWind4(),