@timus-networks/theme 2.4.66 → 2.4.68

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@timus-networks/theme",
   "configKey": "themeOptions",
-  "version": "2.4.66",
+  "version": "2.4.68",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -11,7 +11,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
 const __dirname = __cjs_path__.dirname(__filename);
 const require = __cjs_mod__.createRequire(import.meta.url);
 const name = "@timus-networks/theme";
-const version = "2.4.66";
+const version = "2.4.68";
 const description = "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.";
 const type = "module";
 const exports = {
@@ -125,6 +125,12 @@ const module = defineNuxtModule({
           mode: "client",
           file: resolver.resolve(`${folderPath}/pages/theme.vue`)
         });
+        pages.push({
+          name: "colors",
+          path: "/colors",
+          mode: "client",
+          file: resolver.resolve(`${folderPath}/pages/colors.vue`)
+        });
       }
     },
     "nitro:config": async (nitroConfig) => {

package/dist/runtime/components/development/example.link.vue

@@ -14,6 +14,24 @@
       <template #footer> <html-encode :tag="snippets.basic" /> </template>
     </el-card>
 
+    <el-card>
+      <template #header> Sizes </template>
+      <div class="flex flex-col gap-3 items-start">
+        <p>
+          Default size is Large. Input component provides {{ sizes.length }} additional sizes for you to choose among different scenarios. Use attribute size to set additional
+          sizes <el-text tag="mark">{{ sizes.join(', ') }}</el-text>
+        </p>
+        <div class="flex gap-4 items-start">
+          <el-link v-for="(size, index) of sizes" :key="size + index" :size="size">{{ size }}</el-link>
+        </div>
+      </div>
+      <template #footer>
+        <code class="flex flex-col gap-3 items-start">
+          <html-encode tag="&lt;el-link :size='small' /&gt;" />
+        </code>
+      </template>
+    </el-card>
+
     <el-card>
       <template #header> Disabled </template>
       <div class="flex flex-col gap-3 items-start">
@@ -62,6 +80,7 @@
   import { ref } from 'vue';
 
   const colors = ref<string[]>(['default', 'primary', 'secondary', 'neutral', 'success', 'warning', 'info', 'danger']);
+  const sizes = ['default', 'large', 'medium', 'small', 'mini'];
 
   const snippets = ref({
     basic: `<el-link href="https://element-plus.org" target="_blank" type="secondary">default</el-link>`,

package/dist/runtime/pages/colors.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="flex gap-2 items-start">
+    <div class="flex flex-col gap-[20px]">
+      <div class="text-gray-600 h-3" />
+      <div v-for="number in [1, 2, 3, 4, 5, 6, 7, 8, 9]" :key="number" class="rounded-sm h-[50px] p-1 flex items-center justify-center text-neutral-9 text-sm">{{ number }}</div>
+    </div>
+    <div class="grid grid-cols-7 !gap-[20px] items-center w-full">
+      <div v-for="color of Object.keys(colors)" :key="color" class="flex flex-col gap-[20px] col-span-1">
+        <div class="text-gray-600 text-xs font-semibold h-3">
+          {{ color }}
+        </div>
+        <template v-for="item in [1, 2, 3, 4, 5, 6, 7, 8, 9]" :key="item">
+          <div class="flex gap-1 items-center p-small border border-neutral-2 rounded-md p-1">
+            <div class="rounded-[4px] h-10 w-10 pl-2 flex items-center justify-start" :class="`bg-${color}-${item} ${item >= 5 ? 'text-white' : 'text-neutral-9'}`" tag="mark" />
+            <div class="flex flex-col gap-1">
+              <span>{{ (colors as any)[color][item] }}</span>
+              <span class="p-tiny text-neutral-7r">{{ `${color}-light-${item}` }}</span>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { definePageMeta } from '#imports';
+
+  definePageMeta({
+    layout: 'modules',
+    pageTransition: false,
+  });
+
+  const colors = {
+    primary: {
+      1: '#ddd7f7',
+      2: '#bcafef',
+      3: '#9a87e6',
+      4: '#795fde',
+      5: '#5737d6',
+      6: '#462cab',
+      7: '#342180',
+      8: '#231656',
+      9: '#110b2b',
+    },
+    secondary: {
+      1: '#e4f6f1',
+      2: '#c9eee2',
+      3: '#ade5d4',
+      4: '#92ddc5',
+      5: '#77d4b7',
+      6: '#61af97',
+      7: '#4b8a76',
+      8: '#346556',
+      9: '#1e4035',
+    },
+    neutral: {
+      1: '#eeedef',
+      2: '#dcdbe0',
+      3: '#cbcad0',
+      4: '#b9b8c1',
+      5: '#a8a6b1',
+      6: '#8b8993',
+      7: '#6e6c74',
+      8: '#515056',
+      9: '#343337',
+    },
+    info: {
+      1: '#d9ecff',
+      2: '#b2d9ff',
+      3: '#8cc7fe',
+      4: '#65b4fe',
+      5: '#3fa1fe',
+      6: '#3283cf',
+      7: '#2665a1',
+      8: '#194772',
+      9: '#0d2944',
+    },
+    danger: {
+      1: '#f9dede',
+      2: '#f4bcbd',
+      3: '#ee9b9d',
+      4: '#e9797c',
+      5: '#e3585b',
+      6: '#b94749',
+      7: '#8f3638',
+      8: '#642526',
+      9: '#3a1415',
+    },
+    success: {
+      1: '#dbf1e2',
+      2: '#b7e2c6',
+      3: '#94d4a9',
+      4: '#70c58d',
+      5: '#4cb770',
+      6: '#3d925a',
+      7: '#2e6e43',
+      8: '#1e492d',
+      9: '#0f2516',
+    },
+    warning: {
+      1: '#faf3dc',
+      2: '#f6e8ba',
+      3: '#f1dc97',
+      4: '#edd175',
+      5: '#e8c552',
+      6: '#bda042',
+      7: '#927b32',
+      8: '#665722',
+      9: '#3b3212',
+    },
+  };
+</script>
+
+<style>
+.comment {
+  background-color: var(--el-color-info-light-1);
+  border: 1px solid var(--el-color-info-light-2);
+  border-radius: 4px;
+  color: var(--el-color-info-light-9);
+  font-family: monospace;
+  font-size: 12px;
+  padding: 2px 6px;
+}
+</style>

package/dist/runtime/pages/theme.vue

@@ -40,6 +40,7 @@
 
   definePageMeta({
     layout: 'modules',
+    pageTransition: false,
   });
 
   const activeName = ref('alert');

package/dist/runtime/public/scss/_colors.scss

@@ -44,15 +44,15 @@ $theme: (
     '9': #110b2b,
   ),
   secondary: (
-    '1': #e9fdf7,
-    '2': #d4fbee,
-    '3': #bef8e6,
-    '4': #a9f6dd,
-    '5': #93f4d5,
-    '6': #77d4b7,
-    '7': #5cb599,
-    '8': #40957a,
-    '9': #25765c,
+    '1': #e4f6f1,
+    '2': #c9eee2,
+    '3': #ade5d4,
+    '4': #92ddc5,
+    '5': #77d4b7,
+    '6': #61af97,
+    '7': #4b8a76,
+    '8': #346556,
+    '9': #1e4035,
   ),
   neutral: (
     '1': #eeedef,
@@ -66,15 +66,15 @@ $theme: (
     '9': #343337,
   ),
   info: (
-    '1': #e3f1fb,
-    '2': #c0e5f7,
-    '3': #88d1f1,
-    '4': #3cb5e6,
-    '5': #21a1d6,
-    '6': #1382b6,
-    '7': #116793,
-    '8': #12587a,
-    '9': #144a66,
+    '1': #d9ecff,
+    '2': #b2d9ff,
+    '3': #8cc7fe,
+    '4': #65b4fe,
+    '5': #3fa1fe,
+    '6': #3283cf,
+    '7': #2665a1,
+    '8': #194772,
+    '9': #0d2944,
   ),
   danger: (
     '1': #f9dede,

package/dist/runtime/public/scss/_fonts.scss

@@ -3,34 +3,34 @@ $font-prefix: '';
 $font-config-h: (
   h1: (
     font-size: 24px,
-    line-height: 30px,
-    font-weight: 600,
+    line-height: 32px,
+    font-weight: 500,
   ),
   h2: (
     font-size: 20px,
-    line-height: 24px,
-    font-weight: 600,
+    line-height: 28px,
+    font-weight: 500,
   ),
   h3: (
     font-size: 18px,
-    line-height: 22px,
-    font-weight: 600,
+    line-height: 24px,
+    font-weight: 500,
   ),
 
   h4: (
     font-size: 14px,
-    line-height: 18px,
-    font-weight: 600,
+    line-height: 20px,
+    font-weight: 500,
   ),
   h5: (
     font-size: 12px,
-    line-height: 14px,
-    font-weight: 600,
+    line-height: 16px,
+    font-weight: 500,
   ),
   h6: (
     font-size: 10px,
     line-height: 12px,
-    font-weight: 600,
+    font-weight: 500,
   ),
 );
 
@@ -41,7 +41,7 @@ $font-config-body: (
   ),
   'p-medium': (
     font-size: 14px,
-    line-height: 24px,
+    line-height: 20px,
   ),
   'p-small': (
     font-size: 12px,

package/dist/runtime/public/scss/element-plus/affix.css

@@ -92,32 +92,32 @@
   --el-color-primary-light-9: #110b2b;
 }
 :root {
-  --el-color-secondary-light-1: #e9fdf7;
+  --el-color-secondary-light-1: #e4f6f1;
 }
 :root {
-  --el-color-secondary-light-2: #d4fbee;
+  --el-color-secondary-light-2: #c9eee2;
 }
 :root {
-  --el-color-secondary-light-3: #bef8e6;
+  --el-color-secondary-light-3: #ade5d4;
 }
 :root {
-  --el-color-secondary-light-4: #a9f6dd;
+  --el-color-secondary-light-4: #92ddc5;
 }
 :root {
-  --el-color-secondary-light-5: #93f4d5;
-  --el-color-secondary: #93f4d5;
+  --el-color-secondary-light-5: #77d4b7;
+  --el-color-secondary: #77d4b7;
 }
 :root {
-  --el-color-secondary-light-6: #77d4b7;
+  --el-color-secondary-light-6: #61af97;
 }
 :root {
-  --el-color-secondary-light-7: #5cb599;
+  --el-color-secondary-light-7: #4b8a76;
 }
 :root {
-  --el-color-secondary-light-8: #40957a;
+  --el-color-secondary-light-8: #346556;
 }
 :root {
-  --el-color-secondary-light-9: #25765c;
+  --el-color-secondary-light-9: #1e4035;
 }
 :root {
   --el-color-neutral-light-1: #eeedef;
@@ -148,32 +148,32 @@
   --el-color-neutral-light-9: #343337;
 }
 :root {
-  --el-color-info-light-1: #e3f1fb;
+  --el-color-info-light-1: #d9ecff;
 }
 :root {
-  --el-color-info-light-2: #c0e5f7;
+  --el-color-info-light-2: #b2d9ff;
 }
 :root {
-  --el-color-info-light-3: #88d1f1;
+  --el-color-info-light-3: #8cc7fe;
 }
 :root {
-  --el-color-info-light-4: #3cb5e6;
+  --el-color-info-light-4: #65b4fe;
 }
 :root {
-  --el-color-info-light-5: #21a1d6;
-  --el-color-info: #21a1d6;
+  --el-color-info-light-5: #3fa1fe;
+  --el-color-info: #3fa1fe;
 }
 :root {
-  --el-color-info-light-6: #1382b6;
+  --el-color-info-light-6: #3283cf;
 }
 :root {
-  --el-color-info-light-7: #116793;
+  --el-color-info-light-7: #2665a1;
 }
 :root {
-  --el-color-info-light-8: #12587a;
+  --el-color-info-light-8: #194772;
 }
 :root {
-  --el-color-info-light-9: #144a66;
+  --el-color-info-light-9: #0d2944;
 }
 :root {
   --el-color-danger-light-1: #f9dede;

package/dist/runtime/public/scss/element-plus/alert.css

@@ -92,32 +92,32 @@
   --el-color-primary-light-9: #110b2b;
 }
 :root {
-  --el-color-secondary-light-1: #e9fdf7;
+  --el-color-secondary-light-1: #e4f6f1;
 }
 :root {
-  --el-color-secondary-light-2: #d4fbee;
+  --el-color-secondary-light-2: #c9eee2;
 }
 :root {
-  --el-color-secondary-light-3: #bef8e6;
+  --el-color-secondary-light-3: #ade5d4;
 }
 :root {
-  --el-color-secondary-light-4: #a9f6dd;
+  --el-color-secondary-light-4: #92ddc5;
 }
 :root {
-  --el-color-secondary-light-5: #93f4d5;
-  --el-color-secondary: #93f4d5;
+  --el-color-secondary-light-5: #77d4b7;
+  --el-color-secondary: #77d4b7;
 }
 :root {
-  --el-color-secondary-light-6: #77d4b7;
+  --el-color-secondary-light-6: #61af97;
 }
 :root {
-  --el-color-secondary-light-7: #5cb599;
+  --el-color-secondary-light-7: #4b8a76;
 }
 :root {
-  --el-color-secondary-light-8: #40957a;
+  --el-color-secondary-light-8: #346556;
 }
 :root {
-  --el-color-secondary-light-9: #25765c;
+  --el-color-secondary-light-9: #1e4035;
 }
 :root {
   --el-color-neutral-light-1: #eeedef;
@@ -148,32 +148,32 @@
   --el-color-neutral-light-9: #343337;
 }
 :root {
-  --el-color-info-light-1: #e3f1fb;
+  --el-color-info-light-1: #d9ecff;
 }
 :root {
-  --el-color-info-light-2: #c0e5f7;
+  --el-color-info-light-2: #b2d9ff;
 }
 :root {
-  --el-color-info-light-3: #88d1f1;
+  --el-color-info-light-3: #8cc7fe;
 }
 :root {
-  --el-color-info-light-4: #3cb5e6;
+  --el-color-info-light-4: #65b4fe;
 }
 :root {
-  --el-color-info-light-5: #21a1d6;
-  --el-color-info: #21a1d6;
+  --el-color-info-light-5: #3fa1fe;
+  --el-color-info: #3fa1fe;
 }
 :root {
-  --el-color-info-light-6: #1382b6;
+  --el-color-info-light-6: #3283cf;
 }
 :root {
-  --el-color-info-light-7: #116793;
+  --el-color-info-light-7: #2665a1;
 }
 :root {
-  --el-color-info-light-8: #12587a;
+  --el-color-info-light-8: #194772;
 }
 :root {
-  --el-color-info-light-9: #144a66;
+  --el-color-info-light-9: #0d2944;
 }
 :root {
   --el-color-danger-light-1: #f9dede;

package/dist/runtime/public/scss/element-plus/anchor-link.css

@@ -92,32 +92,32 @@
   --el-color-primary-light-9: #110b2b;
 }
 :root {
-  --el-color-secondary-light-1: #e9fdf7;
+  --el-color-secondary-light-1: #e4f6f1;
 }
 :root {
-  --el-color-secondary-light-2: #d4fbee;
+  --el-color-secondary-light-2: #c9eee2;
 }
 :root {
-  --el-color-secondary-light-3: #bef8e6;
+  --el-color-secondary-light-3: #ade5d4;
 }
 :root {
-  --el-color-secondary-light-4: #a9f6dd;
+  --el-color-secondary-light-4: #92ddc5;
 }
 :root {
-  --el-color-secondary-light-5: #93f4d5;
-  --el-color-secondary: #93f4d5;
+  --el-color-secondary-light-5: #77d4b7;
+  --el-color-secondary: #77d4b7;
 }
 :root {
-  --el-color-secondary-light-6: #77d4b7;
+  --el-color-secondary-light-6: #61af97;
 }
 :root {
-  --el-color-secondary-light-7: #5cb599;
+  --el-color-secondary-light-7: #4b8a76;
 }
 :root {
-  --el-color-secondary-light-8: #40957a;
+  --el-color-secondary-light-8: #346556;
 }
 :root {
-  --el-color-secondary-light-9: #25765c;
+  --el-color-secondary-light-9: #1e4035;
 }
 :root {
   --el-color-neutral-light-1: #eeedef;
@@ -148,32 +148,32 @@
   --el-color-neutral-light-9: #343337;
 }
 :root {
-  --el-color-info-light-1: #e3f1fb;
+  --el-color-info-light-1: #d9ecff;
 }
 :root {
-  --el-color-info-light-2: #c0e5f7;
+  --el-color-info-light-2: #b2d9ff;
 }
 :root {
-  --el-color-info-light-3: #88d1f1;
+  --el-color-info-light-3: #8cc7fe;
 }
 :root {
-  --el-color-info-light-4: #3cb5e6;
+  --el-color-info-light-4: #65b4fe;
 }
 :root {
-  --el-color-info-light-5: #21a1d6;
-  --el-color-info: #21a1d6;
+  --el-color-info-light-5: #3fa1fe;
+  --el-color-info: #3fa1fe;
 }
 :root {
-  --el-color-info-light-6: #1382b6;
+  --el-color-info-light-6: #3283cf;
 }
 :root {
-  --el-color-info-light-7: #116793;
+  --el-color-info-light-7: #2665a1;
 }
 :root {
-  --el-color-info-light-8: #12587a;
+  --el-color-info-light-8: #194772;
 }
 :root {
-  --el-color-info-light-9: #144a66;
+  --el-color-info-light-9: #0d2944;
 }
 :root {
   --el-color-danger-light-1: #f9dede;

package/dist/runtime/public/scss/element-plus/anchor.css

@@ -92,32 +92,32 @@
   --el-color-primary-light-9: #110b2b;
 }
 :root {
-  --el-color-secondary-light-1: #e9fdf7;
+  --el-color-secondary-light-1: #e4f6f1;
 }
 :root {
-  --el-color-secondary-light-2: #d4fbee;
+  --el-color-secondary-light-2: #c9eee2;
 }
 :root {
-  --el-color-secondary-light-3: #bef8e6;
+  --el-color-secondary-light-3: #ade5d4;
 }
 :root {
-  --el-color-secondary-light-4: #a9f6dd;
+  --el-color-secondary-light-4: #92ddc5;
 }
 :root {
-  --el-color-secondary-light-5: #93f4d5;
-  --el-color-secondary: #93f4d5;
+  --el-color-secondary-light-5: #77d4b7;
+  --el-color-secondary: #77d4b7;
 }
 :root {
-  --el-color-secondary-light-6: #77d4b7;
+  --el-color-secondary-light-6: #61af97;
 }
 :root {
-  --el-color-secondary-light-7: #5cb599;
+  --el-color-secondary-light-7: #4b8a76;
 }
 :root {
-  --el-color-secondary-light-8: #40957a;
+  --el-color-secondary-light-8: #346556;
 }
 :root {
-  --el-color-secondary-light-9: #25765c;
+  --el-color-secondary-light-9: #1e4035;
 }
 :root {
   --el-color-neutral-light-1: #eeedef;
@@ -148,32 +148,32 @@
   --el-color-neutral-light-9: #343337;
 }
 :root {
-  --el-color-info-light-1: #e3f1fb;
+  --el-color-info-light-1: #d9ecff;
 }
 :root {
-  --el-color-info-light-2: #c0e5f7;
+  --el-color-info-light-2: #b2d9ff;
 }
 :root {
-  --el-color-info-light-3: #88d1f1;
+  --el-color-info-light-3: #8cc7fe;
 }
 :root {
-  --el-color-info-light-4: #3cb5e6;
+  --el-color-info-light-4: #65b4fe;
 }
 :root {
-  --el-color-info-light-5: #21a1d6;
-  --el-color-info: #21a1d6;
+  --el-color-info-light-5: #3fa1fe;
+  --el-color-info: #3fa1fe;
 }
 :root {
-  --el-color-info-light-6: #1382b6;
+  --el-color-info-light-6: #3283cf;
 }
 :root {
-  --el-color-info-light-7: #116793;
+  --el-color-info-light-7: #2665a1;
 }
 :root {
-  --el-color-info-light-8: #12587a;
+  --el-color-info-light-8: #194772;
 }
 :root {
-  --el-color-info-light-9: #144a66;
+  --el-color-info-light-9: #0d2944;
 }
 :root {
   --el-color-danger-light-1: #f9dede;