From 3c20eb09cc401799aabd2a55f5784c30073c9670 Mon Sep 17 00:00:00 2001
From: Diego Martinez <diegoalejandromartinezrivas@gmail.com>
Date: Sun, 13 Apr 2025 02:08:17 -0400
Subject: [PATCH 01/10] fix: resolve Vue warnings

---
 rollup.config.js                              | 29 ++++++++++---------
 src/components/sections/Snippet.vue           |  4 +--
 src/docs/components/showcases/Checkbox.vue    |  4 +--
 .../components/showcases/Toast/Default.vue    | 11 ++++---
 4 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/rollup.config.js b/rollup.config.js
index c27395d..c73d702 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -145,9 +145,10 @@ const config = [
       replace({
         'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
         'process.env.VUE_APP_VERSION_NUMBER': JSON.stringify(env.parsed.VUE_APP_VERSION_NUMBER),
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: JSON.stringify(true),
         __VUE_OPTIONS_API__: false,
         __VUE_PROD_DEVTOOLS__: false,
-        preventAssignment: true
+        preventAssignment: true,
       }),
       json(),
       alias({ entries: { vue: '@vue/runtime-dom' } }),
@@ -181,13 +182,13 @@ const config = [
 
       prod && terser({ format: { comments: false } }),
       prod &&
-      gzip({
-        fileName: '.br',
-        customCompression: content =>
-          zlib.brotliCompressSync(Buffer.from(content), {
-            params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 11 },
-          }),
-      }),
+        gzip({
+          fileName: '.br',
+          customCompression: content =>
+            zlib.brotliCompressSync(Buffer.from(content), {
+              params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 11 },
+            }),
+        }),
       html({
         publicPath: env.parsed.BASE_URL,
         title: 'Vue3-ui',
@@ -195,12 +196,12 @@ const config = [
       }),
 
       watch &&
-      serve({
-        host: '0.0.0.0',
-        contentBase: 'dist',
-        historyApiFallback: true,
-        port: 5000,
-      }),
+        serve({
+          host: '0.0.0.0',
+          contentBase: 'dist',
+          historyApiFallback: true,
+          port: 5000,
+        }),
 
       watch && livereload({ watch: 'dist' }),
       prod && analyzer(),
diff --git a/src/components/sections/Snippet.vue b/src/components/sections/Snippet.vue
index 8fc7e5a..f86a525 100644
--- a/src/components/sections/Snippet.vue
+++ b/src/components/sections/Snippet.vue
@@ -22,7 +22,7 @@ export default {
           if (binding.value) {
             target.innerHTML = binding.value
           }
-          hljs.highlightBlock(target)
+          hljs.highlightElement(target)
         }
       },
       componentUpdated(el, binding) {
@@ -30,7 +30,7 @@ export default {
         for (const target of targets) {
           if (binding.value) {
             target.innerHTML = binding.value
-            hljs.highlightBlock(target)
+            hljs.highlightElement(target)
           }
         }
       }
diff --git a/src/docs/components/showcases/Checkbox.vue b/src/docs/components/showcases/Checkbox.vue
index a1c271d..6968732 100644
--- a/src/docs/components/showcases/Checkbox.vue
+++ b/src/docs/components/showcases/Checkbox.vue
@@ -22,11 +22,11 @@ export default {
       Active checkbox
     </v-checkbox>
     <br />
-    <v-checkbox indeterminate>
+    <v-checkbox indeterminate v-model="value">
       Indeterminate checkbox
     </v-checkbox>
     <br />
-    <v-checkbox disabled>
+    <v-checkbox disabled v-model="value">
       Disabled checkbox
     </v-checkbox>
   </v-field>
diff --git a/src/docs/components/showcases/Toast/Default.vue b/src/docs/components/showcases/Toast/Default.vue
index a2a9c38..660ae88 100644
--- a/src/docs/components/showcases/Toast/Default.vue
+++ b/src/docs/components/showcases/Toast/Default.vue
@@ -51,17 +51,17 @@
             max="10000"
             :disabled="state.options.duration === false" />
 
-          <v-checkbox @change="changeDuration">
+          <v-checkbox v-model="state.options.duration" @change="changeDuration">
             Disable duration
           </v-checkbox>
         </v-field>
         <v-field>
-          <v-checkbox checked @change="state.options.dismissible = $event.target.checked">
+          <v-checkbox checked v-model="state.options.dismissible" @change="state.options.dismissible = $event.target.checked">
             Dismissible on click
           </v-checkbox>
         </v-field>
         <v-field>
-          <v-checkbox @change="state.options.queue = $event.target.checked">
+          <v-checkbox v-model="state.options.queue" @change="state.options.queue = $event.target.checked">
             Enqueue
           </v-checkbox>
         </v-field>
@@ -69,7 +69,7 @@
           <v-input v-model="state.options.maxToasts" type="number" placeholder="false" />
         </v-field>
         <v-field>
-          <v-checkbox checked @change="state.options.pauseOnHover = $event.target.checked">
+          <v-checkbox checked v-model="state.options.pauseOnHover" @change="state.options.pauseOnHover = $event.target.checked">
             Pause on hover
           </v-checkbox>
         </v-field>
@@ -175,6 +175,9 @@ export default {
       message: "Bulma's notification implemented as a toast plugin.",
       options: {
         duration: 4000,
+        dismissible: true,
+        queue: false,
+        pauseOnHover: true,
       },
     })
 

From b8ab90fee622b45e72e8c65b59864e6deb4691f7 Mon Sep 17 00:00:00 2001
From: Diego Martinez <diegoalejandromartinezrivas@gmail.com>
Date: Sun, 13 Apr 2025 10:44:56 -0400
Subject: [PATCH 02/10] chore: set hydration mismatch flag to false

---
 rollup.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/rollup.config.js b/rollup.config.js
index c73d702..43f723e 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -145,7 +145,7 @@ const config = [
       replace({
         'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
         'process.env.VUE_APP_VERSION_NUMBER': JSON.stringify(env.parsed.VUE_APP_VERSION_NUMBER),
-        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: JSON.stringify(true),
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
         __VUE_OPTIONS_API__: false,
         __VUE_PROD_DEVTOOLS__: false,
         preventAssignment: true,

From 6656c3faf88bf33a850dddb540ee32f3df9bc0ca Mon Sep 17 00:00:00 2001
From: Oscar <oalbornoz08@gmail.com>
Date: Tue, 15 Apr 2025 23:12:58 -0400
Subject: [PATCH 03/10] feat: add colors page

---
 src/pages/Design/Colors.vue | 130 ++++++++++++++++++++++++++++++++++++
 src/pages/Documentation.vue | 109 +++++++-----------------------
 src/pages/index.ts          |   2 +
 src/router/index.js         |   6 ++
 4 files changed, 162 insertions(+), 85 deletions(-)
 create mode 100644 src/pages/Design/Colors.vue

diff --git a/src/pages/Design/Colors.vue b/src/pages/Design/Colors.vue
new file mode 100644
index 0000000..c3043b6
--- /dev/null
+++ b/src/pages/Design/Colors.vue
@@ -0,0 +1,130 @@
+<script>
+import { ref } from 'vue'
+import { VField, VInput, VSwitch, VButton, VColumns, VColumn } from '@pathscale/vue3-ui'
+
+export default {
+  name: 'DevPageColors',
+  components: { VField, VInput, VSwitch, VButton, VColumns, VColumn },
+  setup() {
+    const theme = ref('light')
+    const accent = ref('#75BF73')
+    const gray = ref('#8F97C1')
+    const background = ref('#C2C2C2')
+
+    const colorScales = {
+      accent: {
+        backgrounds: [
+          { id: 1, light: '#FFFFFF', dark: '#111111' },
+          { id: 2, light: '#F8F9FA', dark: '#1A1A1A' },
+        ],
+        interactive: [
+          { id: 3, light: '#EDF2FF', dark: '#2A2A2A' },
+          { id: 4, light: '#DBE4FF', dark: '#3A3A3A' },
+          { id: 5, light: '#BAC8FF', dark: '#4A4A4A' },
+        ],
+        borders: [
+          { id: 6, light: '#91A7FF', dark: '#5A5A5A' },
+          { id: 7, light: '#748FFC', dark: '#6A6A6A' },
+          { id: 8, light: '#5C7CFA', dark: '#7A7A7A' },
+        ],
+        solid: [
+          { id: 9, light: '#4C6EF5', dark: '#8A8A8A' },
+          { id: 10, light: '#4263EB', dark: '#9A9A9A' },
+        ],
+        accessible: [
+          { id: 11, light: '#3B5BDB', dark: '#AAAAAA' },
+          { id: 12, light: '#364FC7', dark: '#BBBBBB' },
+        ]
+      },
+      gray: {
+        backgrounds: [
+          { id: 1, light: '#FFFFFF', dark: '#111111' },
+          { id: 2, light: '#F8F9FA', dark: '#1A1A1A' },
+        ],
+        interactive: [
+          { id: 3, light: '#F1F3F5', dark: '#2A2A2A' },
+          { id: 4, light: '#E9ECEF', dark: '#3A3A3A' },
+          { id: 5, light: '#DEE2E6', dark: '#4A4A4A' },
+        ],
+        borders: [
+          { id: 6, light: '#CED4DA', dark: '#5A5A5A' },
+          { id: 7, light: '#ADB5BD', dark: '#6A6A6A' },
+          { id: 8, light: '#868E96', dark: '#7A7A7A' },
+        ],
+        solid: [
+          { id: 9, light: '#495057', dark: '#8A8A8A' },
+          { id: 10, light: '#343A40', dark: '#9A9A9A' },
+        ],
+        accessible: [
+          { id: 11, light: '#212529', dark: '#AAAAAA' },
+          { id: 12, light: '#121416', dark: '#BBBBBB' },
+        ]
+      }
+    }
+
+    const toggleTheme = () => {
+      theme.value = theme.value === 'light' ? 'dark' : 'light'
+    }
+
+    return {
+      theme,
+      accent,
+      gray,
+      background,
+      colorScales,
+      toggleTheme
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="section">
+    <h1 class="title">
+      Color Palette
+    </h1>
+
+    <div class="block mt-5">
+      <v-switch v-model="theme" type="is-success" passive-type="is-success" true-value="dark" false-value="light">
+        {{ theme === 'light' ? '🌞 Light' : '🌙 Dark' }}
+      </v-switch>
+    </div>
+
+    <div class="columns is-variable is-4 mt-5">
+      <div class="column">
+        <v-field label="Accent">
+          <v-input v-model="accent" type="text" color="is-primary" />
+        </v-field>
+      </div>
+
+      <div class="column">
+        <v-field label="Gray">
+          <v-input v-model="gray" type="text" color="is-primary" />
+        </v-field>
+      </div>
+
+      <div class="column">
+        <v-field label="Background">
+          <v-input v-model="background" type="text" color="is-primary" />
+        </v-field>
+      </div>
+    </div>
+
+    <v-columns v-for="(scale, scaleName) in colorScales" :key="scaleName">
+      <v-column hcentered v-for="(colors, category) in scale" :key="category">
+        <span v-if="scaleName === 'accent'" class="mb-4 is-capitalized">{{ category }}</span>
+        <div class="columns">
+          <div v-for="color in colors" :key="color.id" class="column">
+            <div class="box has-text-centered p-4" :style="{
+              backgroundColor: theme === 'light' ? color.light : color.dark,
+              width: '80px',
+              minWidth: '80px'
+            }">
+              <span class="has-text-white has-text-weight-bold is-size-4">{{ color.id }}</span>
+            </div>
+          </div>
+        </div>
+      </v-column>
+    </v-columns>
+  </div>
+</template>
diff --git a/src/pages/Documentation.vue b/src/pages/Documentation.vue
index 438cfcb..39769ac 100644
--- a/src/pages/Documentation.vue
+++ b/src/pages/Documentation.vue
@@ -55,43 +55,23 @@ export default {
         <div class="pt-6 px-5">
           <v-menu>
             <v-menu-list label="Getting Started">
-              <v-menu-item
-                v-if="isDevelopment"
-                label="Playground"
-                :active="current.playground"
-                @click="redirect('playground')"/>
-              <v-menu-item
-                label="Installation"
-                :active="current.installation"
-                expanded
-                @click="redirect('installation')"/>
+              <v-menu-item v-if="isDevelopment" label="Playground" :active="current.playground"
+                @click="redirect('playground')" />
+              <v-menu-item label="Installation" :active="current.installation" expanded
+                @click="redirect('installation')" />
               <v-menu-item label="Design" expanded>
                 <v-menu-item label="Bulma" :active="current.bulma" @click="redirect('bulma')" />
-                <v-menu-item
-                  label="Theming"
-                  :active="current.theming"
-                  @click="redirect('theming')"/>
+                <v-menu-item label="Theming" :active="current.theming" @click="redirect('theming')" />
+                <v-menu-item label="Colors" :active="current.colors" @click="redirect('colors')" />
                 <v-menu-item label="Layout" expanded>
-                  <v-menu-item
-                    label="Columns"
-                    :active="current.columns"
-                    @click="redirect('columns')"/>
-                  <v-menu-item
-                    label="Sidebar"
-                    :active="current.sidebar"
-                    @click="redirect('sidebar')"/>
+                  <v-menu-item label="Columns" :active="current.columns" @click="redirect('columns')" />
+                  <v-menu-item label="Sidebar" :active="current.sidebar" @click="redirect('sidebar')" />
                   <v-menu-item label="Media" :active="current.media" @click="redirect('media')" />
                 </v-menu-item>
               </v-menu-item>
               <v-menu-item label="Appstate-fast" expanded>
-                <v-menu-item
-                  label="Introducing"
-                  :active="current.introducing"
-                  @click="redirect('introducing')"/>
-                <v-menu-item
-                  label="Modules"
-                  :active="current.modules"
-                  @click="redirect('modules')"/>
+                <v-menu-item label="Introducing" :active="current.introducing" @click="redirect('introducing')" />
+                <v-menu-item label="Modules" :active="current.modules" @click="redirect('modules')" />
               </v-menu-item>
               <v-menu-item label="Icons" :active="current.icons" @click="redirect('icons')" />
             </v-menu-list>
@@ -107,43 +87,25 @@ export default {
                 <!-- <v-menu-item label="Image" @click="redirect('image')" :active="current.image" /> -->
                 <v-menu-item label="Avatar" :active="current.avatar" @click="redirect('avatar')" />
                 <!-- <v-menu-item label="Notifications" /> -->
-                <v-menu-item
-                  label="Progress"
-                  :active="current.progress"
-                  @click="redirect('progress')"/>
+                <v-menu-item label="Progress" :active="current.progress" @click="redirect('progress')" />
                 <v-menu-item label="Table" :active="current.table" @click="redirect('table')" />
                 <v-menu-item label="Tag" :active="current.tag" @click="redirect('tag')" />
-                <v-menu-item
-                  label="Tooltip"
-                  :active="current.tooltip"
-                  @click="redirect('tooltip')"/>
+                <v-menu-item label="Tooltip" :active="current.tooltip" @click="redirect('tooltip')" />
                 <v-menu-item label="Slider" :active="current.slider" @click="redirect('slider')" />
-                <v-menu-item
-                  label="Pagination"
-                  :active="current.pagination"
-                  @click="redirect('pagination')"/>
+                <v-menu-item label="Pagination" :active="current.pagination" @click="redirect('pagination')" />
               </v-menu-item>
               <v-menu-item label="Form" expanded>
                 <v-menu-item label="Input" :active="current.input" @click="redirect('input')" />
                 <v-menu-item label="Autocomplete" :active="current.autocomplete" @click="redirect('autocomplete')" />
 
-                <v-menu-item
-                  label="Validation"
-                  :active="current.validation"
-                  @click="redirect('validation')"/>
-                <v-menu-item
-                  label="Textarea"
-                  :active="current.textarea"
-                  @click="redirect('textarea')"/>
+                <v-menu-item label="Validation" :active="current.validation" @click="redirect('validation')" />
+                <v-menu-item label="Textarea" :active="current.textarea" @click="redirect('textarea')" />
                 <v-menu-item label="Select" :active="current.select" @click="redirect('select')" />
                 <!-- <v-menu-item label="Radio" /> -->
                 <v-menu-item label="Upload" :active="current.file" @click="redirect('upload')" />
                 <v-menu-item label="Switch" :active="current.switch" @click="redirect('switch')" />
                 <v-menu-item label="Field" :active="current.field" @click="redirect('field')" />
-                <v-menu-item
-                  label="Checkbox"
-                  :active="current.checkbox"
-                  @click="redirect('checkbox')"/>
+                <v-menu-item label="Checkbox" :active="current.checkbox" @click="redirect('checkbox')" />
 
                 <!--
  <v-menu-item
@@ -153,15 +115,9 @@ export default {
 -->
               </v-menu-item>
               <v-menu-item label="Components" expanded>
-                <v-menu-item
-                  label="Breadcrumb"
-                  :active="current.breadcrumb"
-                  @click="redirect('breadcrumb')"/>
+                <v-menu-item label="Breadcrumb" :active="current.breadcrumb" @click="redirect('breadcrumb')" />
                 <!-- <v-menu-item label="Card" @click="redirect('card')" :active="current.card" /> -->
-                <v-menu-item
-                  label="Dropdown"
-                  :active="current.dropdown"
-                  @click="redirect('dropdown')"/>
+                <v-menu-item label="Dropdown" :active="current.dropdown" @click="redirect('dropdown')" />
                 <v-menu-item label="Menu" :active="current.menu" @click="redirect('menu')" />
                 <!-- <v-menu-item label="Message" /> -->
                 <!-- <v-menu-item label="Modal" @click="redirect('modal')" :active="current.modal" /> -->
@@ -169,30 +125,18 @@ export default {
                 <!-- <v-menu-item label="Pagination" /> -->
                 <!-- <v-menu-item label="Panel" /> -->
                 <!-- <v-menu-item label="Collapse" /> -->
-                <v-menu-item
-                  label="Accordion"
-                  :active="current.accordion"
-                  @click="redirect('accordion')"/>
+                <v-menu-item label="Accordion" :active="current.accordion" @click="redirect('accordion')" />
                 <v-menu-item label="Tabs" :active="current.tabs" @click="redirect('tabs')" />
-                <v-menu-item
-                  label="Timeline"
-                  :active="current.timeline"
-                  @click="redirect('timeline')"/>
+                <v-menu-item label="Timeline" :active="current.timeline" @click="redirect('timeline')" />
 
                 <v-menu-item label="Steps" :active="current.steps" @click="redirect('steps')" />
                 <v-menu-item label="Chart" :active="current.chart" @click="redirect('chart')" />
               </v-menu-item>
             </v-menu-list>
             <v-menu-list label="Utilities">
-              <v-menu-item
-                label="Toast Notification"
-                :active="current.toast"
-                @click="redirect('toast')"/>
+              <v-menu-item label="Toast Notification" :active="current.toast" @click="redirect('toast')" />
 
-              <v-menu-item
-                label="Datagrid"
-                :active="current.datagrid"
-                @click="redirect('datagrid')"/>
+              <v-menu-item label="Datagrid" :active="current.datagrid" @click="redirect('datagrid')" />
             </v-menu-list>
           </v-menu>
         </div>
@@ -200,13 +144,8 @@ export default {
       <v-column class="pt-6">
         <v-breadcrumb>
           <v-breadcrumb-item tag="router-link" :to="{ name: 'home' }"> Home </v-breadcrumb-item>
-          <v-breadcrumb-item
-            v-for="item in paths"
-            :key="item"
-            class="is-capitalized"
-            tag="router-link"
-            :active="isActiveBreadcrumb(item)"
-            :to="{ name: item }">
+          <v-breadcrumb-item v-for="item in paths" :key="item" class="is-capitalized" tag="router-link"
+            :active="isActiveBreadcrumb(item)" :to="{ name: item }">
             {{ item }}
           </v-breadcrumb-item>
         </v-breadcrumb>
diff --git a/src/pages/index.ts b/src/pages/index.ts
index b34eac7..c9afb6e 100644
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@@ -10,6 +10,8 @@ export { default as Validation } from './Validation.vue'
 
 export { default as Theming } from './Design/Theming.vue'
 
+export { default as Colors } from './Design/Colors.vue'
+
 export { default as Bulma } from './Design/Bulma.vue'
 
 export { default as IntroducingAppState } from './AppState/Introducing.vue'
diff --git a/src/router/index.js b/src/router/index.js
index b1863b2..6e08c93 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -89,6 +89,12 @@ const routes = [
             component: Pages.Theming,
             meta: metaTags('Theming', 'Customize Vue3-ui and make it your own.'),
           },
+          {
+            name: 'colors',
+            path: 'colors',
+            component: Pages.Colors,
+            meta: metaTags('Colors', 'Colors are a great way to add personality to your application.'),
+          },
           {
             name: 'bulma',
             path: 'bulma',

From 4ec8b507926d810e91e83df72330761035247627 Mon Sep 17 00:00:00 2001
From: Oscar <oalbornoz08@gmail.com>
Date: Tue, 15 Apr 2025 23:34:51 -0400
Subject: [PATCH 04/10] feat: add color palette

---
 bun.lock                    |   5 ++
 package.json                |   3 +-
 src/pages/Design/Colors.vue | 105 ++++++++++++++++++------------------
 3 files changed, 60 insertions(+), 53 deletions(-)

diff --git a/bun.lock b/bun.lock
index 9c9ca73..e766562 100644
--- a/bun.lock
+++ b/bun.lock
@@ -3,6 +3,9 @@
   "workspaces": {
     "": {
       "name": "vue3.dev",
+      "dependencies": {
+        "tinycolor2": "1.6.0",
+      },
       "devDependencies": {
         "@babel/core": "^7.26.10",
         "@bulvar/bulma": "^0.11.24",
@@ -1603,6 +1606,8 @@
 
     "thenify-all": ["thenify-all@1.6.0", "", { "dependencies": { "thenify": ">= 3.1.0 < 4" } }, "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA=="],
 
+    "tinycolor2": ["tinycolor2@1.6.0", "", {}, "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="],
+
     "tinyglobby": ["tinyglobby@0.2.12", "", { "dependencies": { "fdir": "^6.4.3", "picomatch": "^4.0.2" } }, "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww=="],
 
     "to-data-view": ["to-data-view@2.0.0", "", {}, "sha512-RGEM5KqlPHr+WVTPmGNAXNeFEmsBnlkxXaIfEpUYV0AST2Z5W1EGq9L/MENFrMMmL2WQr1wjkmZy/M92eKhjYA=="],
diff --git a/package.json b/package.json
index 1a2c9c5..de9a919 100644
--- a/package.json
+++ b/package.json
@@ -90,7 +90,8 @@
     "vue": "^3.5.13",
     "vue-composable": "^1.0.0-beta.24",
     "vue-i18n": "^9.1.10",
-    "vue-router": "^4.0.16"
+    "vue-router": "^4.0.16",
+    "tinycolor2": "1.6.0"
   },
   "engines": {
     "bun": ">=1.0.0"
diff --git a/src/pages/Design/Colors.vue b/src/pages/Design/Colors.vue
index c3043b6..db94bfb 100644
--- a/src/pages/Design/Colors.vue
+++ b/src/pages/Design/Colors.vue
@@ -1,67 +1,68 @@
 <script>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { VField, VInput, VSwitch, VButton, VColumns, VColumn } from '@pathscale/vue3-ui'
+import tinycolor from 'tinycolor2'
 
 export default {
   name: 'DevPageColors',
   components: { VField, VInput, VSwitch, VButton, VColumns, VColumn },
   setup() {
     const theme = ref('light')
-    const accent = ref('#75BF73')
-    const gray = ref('#8F97C1')
-    const background = ref('#C2C2C2')
+    const accent = ref('#3D63DD')
+    const gray = ref('#8B8D98')
+    const background = ref('#FFFFFF')
 
-    const colorScales = {
-      accent: {
-        backgrounds: [
-          { id: 1, light: '#FFFFFF', dark: '#111111' },
-          { id: 2, light: '#F8F9FA', dark: '#1A1A1A' },
-        ],
-        interactive: [
-          { id: 3, light: '#EDF2FF', dark: '#2A2A2A' },
-          { id: 4, light: '#DBE4FF', dark: '#3A3A3A' },
-          { id: 5, light: '#BAC8FF', dark: '#4A4A4A' },
-        ],
-        borders: [
-          { id: 6, light: '#91A7FF', dark: '#5A5A5A' },
-          { id: 7, light: '#748FFC', dark: '#6A6A6A' },
-          { id: 8, light: '#5C7CFA', dark: '#7A7A7A' },
-        ],
-        solid: [
-          { id: 9, light: '#4C6EF5', dark: '#8A8A8A' },
-          { id: 10, light: '#4263EB', dark: '#9A9A9A' },
-        ],
-        accessible: [
-          { id: 11, light: '#3B5BDB', dark: '#AAAAAA' },
-          { id: 12, light: '#364FC7', dark: '#BBBBBB' },
-        ]
-      },
-      gray: {
-        backgrounds: [
-          { id: 1, light: '#FFFFFF', dark: '#111111' },
-          { id: 2, light: '#F8F9FA', dark: '#1A1A1A' },
-        ],
-        interactive: [
-          { id: 3, light: '#F1F3F5', dark: '#2A2A2A' },
-          { id: 4, light: '#E9ECEF', dark: '#3A3A3A' },
-          { id: 5, light: '#DEE2E6', dark: '#4A4A4A' },
-        ],
-        borders: [
-          { id: 6, light: '#CED4DA', dark: '#5A5A5A' },
-          { id: 7, light: '#ADB5BD', dark: '#6A6A6A' },
-          { id: 8, light: '#868E96', dark: '#7A7A7A' },
-        ],
-        solid: [
-          { id: 9, light: '#495057', dark: '#8A8A8A' },
-          { id: 10, light: '#343A40', dark: '#9A9A9A' },
-        ],
-        accessible: [
-          { id: 11, light: '#212529', dark: '#AAAAAA' },
-          { id: 12, light: '#121416', dark: '#BBBBBB' },
-        ]
+    const generateColorScale = (baseColor, steps) => {
+      const color = tinycolor(baseColor)
+      const scale = []
+
+      for (let i = 0; i < steps; i++) {
+        if (i < 2) {
+          scale.push(color.clone().lighten(60 - (i * 20)).toHexString())
+        } else if (i < 5) {
+          scale.push(color.clone().lighten(35 - ((i - 2) * 12)).toHexString())
+        } else if (i < 8) {
+          scale.push(color.clone().lighten(15 - ((i - 5) * 8)).toHexString())
+        } else if (i < 10) {
+          scale.push(color.clone().darken((i - 8) * 12).toHexString())
+        } else {
+          scale.push(color.clone().darken(25 + ((i - 10) * 12)).toHexString())
+        }
       }
+      return scale
     }
 
+    const colorScales = computed(() => {
+      const accentScale = generateColorScale(accent.value, 12)
+      const grayScale = generateColorScale(gray.value, 12)
+
+      const createCategory = (start, length, lightScale) => {
+        const scale = theme.value === 'light' ? lightScale : [...lightScale].reverse()
+        return Array.from({ length }, (_, i) => ({
+          id: start + i,
+          light: lightScale[start + i - 1],
+          dark: scale[start + i - 1]
+        }))
+      }
+
+      return {
+        accent: {
+          backgrounds: createCategory(1, 2, accentScale),
+          interactive: createCategory(3, 3, accentScale),
+          borders: createCategory(6, 3, accentScale),
+          solid: createCategory(9, 2, accentScale),
+          accessible: createCategory(11, 2, accentScale)
+        },
+        gray: {
+          backgrounds: createCategory(1, 2, grayScale),
+          interactive: createCategory(3, 3, grayScale),
+          borders: createCategory(6, 3, grayScale),
+          solid: createCategory(9, 2, grayScale),
+          accessible: createCategory(11, 2, grayScale)
+        }
+      }
+    })
+
     const toggleTheme = () => {
       theme.value = theme.value === 'light' ? 'dark' : 'light'
     }

From 7e00b286da1b87e3d45d017bd9c5e01ee2678b57 Mon Sep 17 00:00:00 2001
From: Oscar <oalbornoz08@gmail.com>
Date: Tue, 15 Apr 2025 23:49:46 -0400
Subject: [PATCH 05/10] refactor: minor change

---
 src/pages/Design/Colors.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/Design/Colors.vue b/src/pages/Design/Colors.vue
index db94bfb..228f1e1 100644
--- a/src/pages/Design/Colors.vue
+++ b/src/pages/Design/Colors.vue
@@ -112,10 +112,10 @@ export default {
     </div>
 
     <v-columns v-for="(scale, scaleName) in colorScales" :key="scaleName">
-      <v-column hcentered v-for="(colors, category) in scale" :key="category">
+      <v-column hcentered v-for="(colors, category) in scale" :key="category" narrow>
         <span v-if="scaleName === 'accent'" class="mb-4 is-capitalized">{{ category }}</span>
         <div class="columns">
-          <div v-for="color in colors" :key="color.id" class="column">
+          <v-column narrow v-for="color in colors" :key="color.id" class="column">
             <div class="box has-text-centered p-4" :style="{
               backgroundColor: theme === 'light' ? color.light : color.dark,
               width: '80px',
@@ -123,7 +123,7 @@ export default {
             }">
               <span class="has-text-white has-text-weight-bold is-size-4">{{ color.id }}</span>
             </div>
-          </div>
+          </v-column>
         </div>
       </v-column>
     </v-columns>

From 7aade75491a8c72926d2a27d9c7999a7462d8e86 Mon Sep 17 00:00:00 2001
From: Oscar <oalbornoz08@gmail.com>
Date: Wed, 16 Apr 2025 00:55:43 -0400
Subject: [PATCH 06/10] feat: add component showcase

---
 src/components/ComponentShowcase.vue | 127 +++++++++++++++++++++++++++
 src/pages/Design/Colors.vue          |  22 ++++-
 2 files changed, 147 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ComponentShowcase.vue

diff --git a/src/components/ComponentShowcase.vue b/src/components/ComponentShowcase.vue
new file mode 100644
index 0000000..fa7398a
--- /dev/null
+++ b/src/components/ComponentShowcase.vue
@@ -0,0 +1,127 @@
+<script>
+import {
+  VField,
+  VInput,
+  VButton,
+  VCard,
+  VCardContent,
+  VCardHeader,
+  VMenu,
+  VMenuList,
+  VMenuItem,
+  VTag,
+  VTabs,
+  VTab
+} from '@pathscale/vue3-ui'
+import { ref } from 'vue'
+
+export default {
+  name: 'ComponentShowcase',
+  components: {
+    VField,
+    VInput,
+    VButton,
+    VCard,
+    VCardContent,
+    VCardHeader,
+    VMenu,
+    VMenuList,
+    VMenuItem,
+    VTag,
+    VTabs,
+    VTab
+  },
+  setup() {
+    const activeTab = ref(0)
+    return { activeTab }
+  }
+}
+</script>
+
+<template>
+  <h2 class="title mt-6">Component Showcase</h2>
+  <div class="columns mt-4">
+    <!-- Primera columna -->
+    <div class="column">
+      <v-field class="mb-4">
+        <v-field addons>
+          <v-input placeholder="Search..." />
+          <v-button type="is-primary">
+            Search
+          </v-button>
+        </v-field>
+      </v-field>
+
+      <v-menu class="mb-4">
+        <v-menu-list label="Navigation">
+          <v-menu-item label="Home" :active="true" />
+          <v-menu-item label="Products" expanded>
+            <v-menu-item label="Electronics" />
+            <v-menu-item label="Clothing" />
+            <v-menu-item label="Books" />
+          </v-menu-item>
+          <v-menu-item label="About">
+            <v-menu-item label="Company" />
+            <v-menu-item label="Team" />
+            <v-menu-item label="Contact" />
+          </v-menu-item>
+        </v-menu-list>
+        <v-menu-list label="Account">
+          <v-menu-item label="Settings" />
+          <v-menu-item label="Logout" />
+        </v-menu-list>
+      </v-menu>
+
+      <div class="tags">
+        <v-tag type="is-primary" class="mr-2">Primary</v-tag>
+        <v-tag type="is-success" class="mr-2">Success</v-tag>
+        <v-tag type="is-warning" class="mr-2">Warning</v-tag>
+        <v-tag type="is-danger">Danger</v-tag>
+      </div>
+    </div>
+
+    <!-- Columna central -->
+    <div class="column">
+      <v-card>
+        <v-card-header>
+          <p class="card-header-title">Sign Up</p>
+        </v-card-header>
+        <v-card-content>
+          <v-field label="Full Name">
+            <v-input placeholder="John Doe" />
+          </v-field>
+          <v-field label="Email">
+            <v-input type="email" placeholder="john@example.com" />
+          </v-field>
+          <v-field label="Password">
+            <v-input type="password" placeholder="••••••••" password-reveal />
+          </v-field>
+          <v-field>
+            <v-button type="is-primary" expanded>Create Account</v-button>
+          </v-field>
+        </v-card-content>
+      </v-card>
+    </div>
+
+    <!-- Tercera columna -->
+    <div class="column">
+      <v-tabs v-model="activeTab" type="is-boxed">
+        <v-tab label="Overview">
+          <div class="p-4">
+            <p>Overview content goes here</p>
+          </div>
+        </v-tab>
+        <v-tab label="Details">
+          <div class="p-4">
+            <p>Details content goes here</p>
+          </div>
+        </v-tab>
+        <v-tab label="Settings">
+          <div class="p-4">
+            <p>Settings content goes here</p>
+          </div>
+        </v-tab>
+      </v-tabs>
+    </div>
+  </div>
+</template> 
\ No newline at end of file
diff --git a/src/pages/Design/Colors.vue b/src/pages/Design/Colors.vue
index 228f1e1..c519d8c 100644
--- a/src/pages/Design/Colors.vue
+++ b/src/pages/Design/Colors.vue
@@ -1,11 +1,27 @@
 <script>
 import { ref, computed } from 'vue'
-import { VField, VInput, VSwitch, VButton, VColumns, VColumn } from '@pathscale/vue3-ui'
+import {
+  VField,
+  VInput,
+  VSwitch,
+  VButton,
+  VColumns,
+  VColumn
+} from '@pathscale/vue3-ui'
+import ComponentShowcase from '../../components/ComponentShowcase.vue'
 import tinycolor from 'tinycolor2'
 
 export default {
   name: 'DevPageColors',
-  components: { VField, VInput, VSwitch, VButton, VColumns, VColumn },
+  components: {
+    VField,
+    VInput,
+    VSwitch,
+    VButton,
+    VColumns,
+    VColumn,
+    ComponentShowcase
+  },
   setup() {
     const theme = ref('light')
     const accent = ref('#3D63DD')
@@ -127,5 +143,7 @@ export default {
         </div>
       </v-column>
     </v-columns>
+
+    <component-showcase />
   </div>
 </template>

From 74e9838bce06eb2da164792f31ad863f768872ba Mon Sep 17 00:00:00 2001
From: Oscar <oalbornoz08@gmail.com>
Date: Wed, 16 Apr 2025 01:21:03 -0400
Subject: [PATCH 07/10] refactor: minor change

---
 src/components/ComponentShowcase.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/ComponentShowcase.vue b/src/components/ComponentShowcase.vue
index fa7398a..06f0541 100644
--- a/src/components/ComponentShowcase.vue
+++ b/src/components/ComponentShowcase.vue
@@ -83,9 +83,7 @@ export default {
     <!-- Columna central -->
     <div class="column">
       <v-card>
-        <v-card-header>
-          <p class="card-header-title">Sign Up</p>
-        </v-card-header>
+
         <v-card-content>
           <v-field label="Full Name">
             <v-input placeholder="John Doe" />
@@ -124,4 +122,4 @@ export default {
       </v-tabs>
     </div>
   </div>
-</template> 
\ No newline at end of file
+</template>
\ No newline at end of file

From 73232b414decdca796bb1ebabb80b359509560a2 Mon Sep 17 00:00:00 2001
From: Oscar <oalbornoz08@gmail.com>
Date: Wed, 16 Apr 2025 02:13:26 -0400
Subject: [PATCH 08/10] feat: apply bulma colors vars

---
 src/components/ComponentShowcase.vue |  4 --
 src/pages/Design/Colors.vue          | 57 ++++++++++++++++++++++++----
 src/theming/variables.js             | 44 ++++++++++-----------
 3 files changed, 72 insertions(+), 33 deletions(-)

diff --git a/src/components/ComponentShowcase.vue b/src/components/ComponentShowcase.vue
index 06f0541..1157311 100644
--- a/src/components/ComponentShowcase.vue
+++ b/src/components/ComponentShowcase.vue
@@ -41,7 +41,6 @@ export default {
 <template>
   <h2 class="title mt-6">Component Showcase</h2>
   <div class="columns mt-4">
-    <!-- Primera columna -->
     <div class="column">
       <v-field class="mb-4">
         <v-field addons>
@@ -80,10 +79,8 @@ export default {
       </div>
     </div>
 
-    <!-- Columna central -->
     <div class="column">
       <v-card>
-
         <v-card-content>
           <v-field label="Full Name">
             <v-input placeholder="John Doe" />
@@ -101,7 +98,6 @@ export default {
       </v-card>
     </div>
 
-    <!-- Tercera columna -->
     <div class="column">
       <v-tabs v-model="activeTab" type="is-boxed">
         <v-tab label="Overview">
diff --git a/src/pages/Design/Colors.vue b/src/pages/Design/Colors.vue
index c519d8c..fdec97f 100644
--- a/src/pages/Design/Colors.vue
+++ b/src/pages/Design/Colors.vue
@@ -1,10 +1,9 @@
 <script>
-import { ref, computed } from 'vue'
+import { ref, computed, watchEffect } from 'vue'
 import {
   VField,
   VInput,
   VSwitch,
-  VButton,
   VColumns,
   VColumn
 } from '@pathscale/vue3-ui'
@@ -17,7 +16,6 @@ export default {
     VField,
     VInput,
     VSwitch,
-    VButton,
     VColumns,
     VColumn,
     ComponentShowcase
@@ -79,17 +77,63 @@ export default {
       }
     })
 
-    const toggleTheme = () => {
-      theme.value = theme.value === 'light' ? 'dark' : 'light'
+    const applyBulmaColorVars = (colorScales, theme = 'light') => {
+      const root = document.documentElement
+
+      const get = (scale, category, index) =>
+        colorScales[scale][category][index]?.[theme]
+
+      const vars = {
+        // Grays → Bulma core grays
+        '--black': get('gray', 'accessible', 1),
+        '--black-bis': get('gray', 'accessible', 0),
+        '--black-ter': get('gray', 'solid', 1),
+        '--grey-darker': get('gray', 'solid', 0),
+        '--grey-dark': get('gray', 'borders', 2),
+        '--grey': get('gray', 'borders', 1),
+        '--grey-light': get('gray', 'borders', 0),
+        '--grey-lighter': get('gray', 'interactive', 2),
+        '--grey-lightest': get('gray', 'interactive', 1),
+        '--white-ter': get('gray', 'interactive', 0),
+        '--white-bis': get('gray', 'backgrounds', 1),
+        '--white': get('gray', 'backgrounds', 0),
+
+        // Accent → Bulma semantic colors
+        '--orange': get('accent', 'interactive', 2),
+        '--yellow': get('accent', 'interactive', 1),
+        '--green': get('accent', 'borders', 0),
+        '--turquoise': get('accent', 'borders', 1),
+        '--cyan': get('accent', 'borders', 0),
+        '--blue': get('accent', 'borders', 2),
+        '--purple': get('accent', 'solid', 1),
+        '--red': get('accent', 'accessible', 0),
+
+        // Primary roles
+        '--primary': get('accent', 'solid', 0),
+        '--primary-light': get('accent', 'interactive', 1),
+        '--primary-dark': get('accent', 'accessible', 0),
+        '--link': get('accent', 'borders', 1),
+        '--info': get('accent', 'interactive', 0)
+      }
+
+      for (const [key, value] of Object.entries(vars)) {
+        if (value) {
+          root.style.setProperty(key, value)
+        }
+      }
     }
 
+    watchEffect(() => {
+      applyBulmaColorVars(colorScales.value, theme.value)
+    })
+
+
     return {
       theme,
       accent,
       gray,
       background,
       colorScales,
-      toggleTheme
     }
   }
 }
@@ -126,7 +170,6 @@ export default {
         </v-field>
       </div>
     </div>
-
     <v-columns v-for="(scale, scaleName) in colorScales" :key="scaleName">
       <v-column hcentered v-for="(colors, category) in scale" :key="category" narrow>
         <span v-if="scaleName === 'accent'" class="mb-4 is-capitalized">{{ category }}</span>
diff --git a/src/theming/variables.js b/src/theming/variables.js
index 9f4f483..34dd113 100644
--- a/src/theming/variables.js
+++ b/src/theming/variables.js
@@ -1,27 +1,27 @@
 const variables = {
-  // fonts
-  '$family-primary': 'metroclean, Arial, sans-serif',
-  '$subtitle-family': 'metroclean, Arial, sans-serif',
-  '$title-family': 'metroclean, Arial, sans-serif',
-  '$weight-normal': '600', // TODO Must be work with 400 (normal)
+  // // fonts
+  // '$family-primary': 'metroclean, Arial, sans-serif',
+  // '$subtitle-family': 'metroclean, Arial, sans-serif',
+  // '$title-family': 'metroclean, Arial, sans-serif',
+  // '$weight-normal': '600', // TODO Must be work with 400 (normal)
 
-  $primary: '#111',
-  '$button-background-color': '#4958f5',
-  '$button-border-width': '2px',
-  '$button-color': '#dbd',
-  $danger: '#aa1e02',
-  '$footer-background-color': '#000',
-  '$footer-padding': '10px',
-  '$navbar-background-color': '#000',
-  '$navbar-dropdown-arrow': '#fff',
-  '$navbar-height': '2.5rem',
-  '$navbar-item-active-color': '#fff',
-  '$navbar-item-color': 'gray',
-  '$navbar-item-hover-color': '#fff',
-  '$navbar-item-hover-background-color': '#000',
-  '$navbar-item-img-max-height': '4rem',
-  '$section-padding': '0.5rem 1.5rem',
-  '$size-7': '0.875em',
+  // $primary: '#111',
+  // '$button-background-color': '#4958f5',
+  // '$button-border-width': '2px',
+  // '$button-color': '#dbd',
+  // $danger: '#aa1e02',
+  // '$footer-background-color': '#000',
+  // '$footer-padding': '10px',
+  // '$navbar-background-color': '#000',
+  // '$navbar-dropdown-arrow': '#fff',
+  // '$navbar-height': '2.5rem',
+  // '$navbar-item-active-color': '#fff',
+  // '$navbar-item-color': 'gray',
+  // '$navbar-item-hover-color': '#fff',
+  // '$navbar-item-hover-background-color': '#000',
+  // '$navbar-item-img-max-height': '4rem',
+  // '$section-padding': '0.5rem 1.5rem',
+  // '$size-7': '0.875em',
 }
 
 export default variables

From 6a923e7ac07c59b37e46ade37407b4c012d8252e Mon Sep 17 00:00:00 2001
From: Diego Martinez <diegoalejandromartinezrivas@gmail.com>
Date: Wed, 16 Apr 2025 19:57:01 -0400
Subject: [PATCH 09/10] fix(toast showcase): separate duration toggle logic to
 avoid invalid prop warning

---
 .../components/showcases/Toast/Default.vue    | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/docs/components/showcases/Toast/Default.vue b/src/docs/components/showcases/Toast/Default.vue
index 660ae88..70a5346 100644
--- a/src/docs/components/showcases/Toast/Default.vue
+++ b/src/docs/components/showcases/Toast/Default.vue
@@ -49,10 +49,14 @@
             v-model="state.options.duration"
             min="1000"
             max="10000"
-            :disabled="state.options.duration === false" />
-
-          <v-checkbox v-model="state.options.duration" @change="changeDuration">
-            Disable duration
+            :disabled="state.options.durationDisabled" />
+          <v-checkbox
+            :model-value="state.options.durationDisabled"
+            @update:model-value="(checked) => {
+              state.options.durationDisabled = checked
+              if (!checked) state.options.duration = 4000
+            }">
+          Disable duration
           </v-checkbox>
         </v-field>
         <v-field>
@@ -69,7 +73,7 @@
           <v-input v-model="state.options.maxToasts" type="number" placeholder="false" />
         </v-field>
         <v-field>
-          <v-checkbox checked v-model="state.options.pauseOnHover" @change="state.options.pauseOnHover = $event.target.checked">
+          <v-checkbox checked v-model="state.options.pauseOnHover">
             Pause on hover
           </v-checkbox>
         </v-field>
@@ -178,6 +182,7 @@ export default {
         dismissible: true,
         queue: false,
         pauseOnHover: true,
+        durationDisabled: false
       },
     })
 
@@ -220,11 +225,7 @@ export default {
       })
     }
 
-    function changeDuration(e) {
-      state.options.duration = !e.target.checked ? 4000 : false
-    }
-
-    return { state, positions, hasOptions, toast, changeDuration }
+    return { state, positions, hasOptions, toast }
   },
 }
 </script>

From 6e2ff2a142bcd2bb3783fab0f948bf9a535e77f4 Mon Sep 17 00:00:00 2001
From: Diego Martinez <diegoalejandromartinezrivas@gmail.com>
Date: Thu, 17 Apr 2025 09:51:37 -0400
Subject: [PATCH 10/10] fix(toast showcase): remove redundant @change listeners
 from v-checkbox

---
 src/docs/components/showcases/Toast/Default.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/docs/components/showcases/Toast/Default.vue b/src/docs/components/showcases/Toast/Default.vue
index 70a5346..1b422ff 100644
--- a/src/docs/components/showcases/Toast/Default.vue
+++ b/src/docs/components/showcases/Toast/Default.vue
@@ -60,12 +60,12 @@
           </v-checkbox>
         </v-field>
         <v-field>
-          <v-checkbox checked v-model="state.options.dismissible" @change="state.options.dismissible = $event.target.checked">
+          <v-checkbox checked v-model="state.options.dismissible">
             Dismissible on click
           </v-checkbox>
         </v-field>
         <v-field>
-          <v-checkbox v-model="state.options.queue" @change="state.options.queue = $event.target.checked">
+          <v-checkbox v-model="state.options.queue">
             Enqueue
           </v-checkbox>
         </v-field>