@timus-networks/theme 2.2.2 → 2.3.1

package/dist/module.json

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

package/dist/module.mjs

@@ -12,7 +12,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.2.2";
+const version = "2.3.1";
 const description = "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.";
 const type = "module";
 const exports = {
@@ -83,7 +83,14 @@ const PackageJson = {
 	scripts: scripts,
 	"standard-version": {
 	tagPrefix: "theme-v",
-	releaseCommitMessageFormat: "chore(release): @timus-networks/theme {{currentTag}}"
+	releaseCommitMessageFormat: "chore(release): @timus-networks/theme {{currentTag}}",
+	types: [
+		{
+			type: "build",
+			section: "Build System",
+			hidden: true
+		}
+	]
 },
 	repository: repository,
 	keywords: keywords,

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

@@ -20,7 +20,7 @@
             </span>
             <template #footer>
               <el-button plain @click="dialogVisible = false">Cancel</el-button>
-              <el-button type="primary" @click="dialogVisible = false"> Confirm </el-button>
+              <el-button @click="dialogVisible = false"> Confirm </el-button>
             </template>
           </el-dialog>
         </div>
@@ -31,13 +31,12 @@
 </template>
 
 <script lang="ts" setup>
-  import { useZIndex } from 'element-plus';
   import { ElMessageBox } from 'element-plus';
   import { ref } from 'vue';
 
-  const c = ref(22);
-
-  useZIndex(c);
+  // import { useZIndex } from 'element-plus';
+  // const c = ref(22);
+  // useZIndex(c);
 
   const dialogVisible = ref(false);
   const handleClose = (done: () => void) => {

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

@@ -31,7 +31,7 @@
   import { ElMessage, type MessageOptions } from 'element-plus';
   import { ref } from 'vue';
 
-  const colors = ref(['success', 'warning', 'info', 'error', 'danger']);
+  const colors = ref(['success', 'warning', 'info', 'error' /* , 'danger' */]);
   const snippets = ref({
     basic: `
     import { ElMessage, type MessageOptions } from 'element-plus';

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

@@ -72,9 +72,9 @@
         <div class="flex gap-2">
           <el-popover :visible="visible" placement="top" :width="360">
             <p>Are you sure to delete this?</p>
-            <div class="flex gap-2 justify-end mt-3">
-              <el-button size="small" text @click="visible = false">cancel</el-button>
-              <el-button size="small" type="primary" @click="visible = false"> confirm </el-button>
+            <div class="popover-footer">
+              <el-button plain @click="visible = false">cancel</el-button>
+              <el-button @click="visible = false"> confirm </el-button>
             </div>
             <template #reference>
               <el-button @click="visible = true">Delete</el-button>

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

@@ -12,7 +12,7 @@
           <el-text tag="mark">label</el-text> to define the column name. You can also use the attribute <el-text tag="mark">width</el-text> to define the width of columns.
         </p>
         <el-table :data="tableData" style="width: 100%" flexible height="300">
-          <el-table-column type="selection" width="55" />
+          <el-table-column type="selection" width="16" />
           <el-table-column label="Date" width="120" show-overflow-tooltip>
             <template #default="scope">{{ scope.row.date }}</template>
           </el-table-column>

package/dist/runtime/public/scss/_buttons.scss

@@ -0,0 +1,159 @@
+$btn-config: (
+  'xs': (
+    min-width: 24px,
+    min-height: 24px,
+    padding: 0 4px,
+    font-size: 10px,
+    line-height: 10px,
+    border-radius: 3px,
+  ),
+  'sm': (
+    min-width: 32px,
+    min-height: 32px,
+    padding: 0 6px,
+    font-size: 12px,
+    line-height: 16px,
+    border-radius: 3px,
+  ),
+  'md': (
+    min-width: 36px,
+    min-height: 36px,
+    padding: 0 8px,
+    font-size: 14px,
+    line-height: 18px,
+    border-radius: 3px,
+  ),
+  'lg': (
+    min-width: 40px,
+    min-height: 40px,
+    padding: 0 12px,
+    font-size: 14px,
+    line-height: 20px,
+    border-radius: 4px,
+  ),
+  'xl': (
+    min-width: 48px,
+    min-height: 48px,
+    padding: 0 16px,
+    font-size: 14px,
+    line-height: 22px,
+    border-radius: 6px,
+  ),
+);
+$btn-font-color: white;
+$btn-bg: 500;
+$btn-border: 200;
+$btn-hover-bg: 600;
+$btn-active-bg: 700;
+
+// #### Generate Size Classes
+.btn {
+  // border-color: var(--button-border-color);
+  // background-color: var(--button-background-color);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  @each $size, $value in $btn-config {
+    &-#{$size} {
+      @extend %icon-#{$size};
+      @each $prop-name, $prop-value in $value {
+        --button-#{$size}-#{$prop-name}: #{$prop-value};
+        #{$prop-name}: var(--button-#{$size}-#{$prop-name});
+      }
+    }
+  }
+}
+
+// #### Generate Color Classes
+
+@each $name, $item in $theme {
+  $name: '#{$name}';
+
+  .btn-#{$name} {
+    $light: if($name==light, var(--#{secondary}-#{600}), var(--button-font-color)); // var(--button-font-color); //
+
+    --button-background-color: var(--#{$name}-#{500}); // #{map.get($item, #{$btn-bg})};
+    --button-border-color: var(--#{$name}-#{500});
+    --button-hover-color: var(--button-hover-font-color);
+    --button-hover-background-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-hover-bg})};
+    --button-hover-border-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-hover-bg})};
+    --button-active-color: var(--button-active-font-color);
+    --button-active-background-color: rgba(var(--#{$name}-#{600}-rgb), 0.95); // #{map.get($item, #{$btn-active-bg})};
+    --button-active-border-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-active-bg})};
+    background-color: var(--button-background-color);
+    border-color: var(--button-border-color);
+    color: #{$light};
+
+    &:disabled {
+      &:not(.btn-ghost, .btn-outline) {
+        background-color: var(--button-border-color);
+        border-color: var(--button-border-color);
+      }
+    }
+
+    &-outline, &-ghost {
+      --button-background-color: var(--#{$name}-#{500}); // #{map.get($item, #{$btn-bg})};
+      --button-border-color: var(--#{$name}-#{500});
+      --button-hover-color: var(--button-hover-font-color);
+      --button-hover-background-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-hover-bg})};
+      --button-hover-border-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-hover-bg})};
+      --button-active-color: var(--button-active-font-color);
+      --button-active-background-color: rgba(var(--#{$name}-#{600}-rgb), 0.95); // #{map.get($item, #{$btn-active-bg})};
+      --button-active-border-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-active-bg})};
+      border-color: var(--button-border-color);
+      color: var(--button-background-color);
+
+      &:disabled {
+        // color: #{$light};
+      }
+
+      &:hover {
+        background-color: var(--button-hover-background-color);
+        border-color: var(--button-hover-background-color);
+        color: if($name==light, var(--#{light}-#{900}), var(--button-font-color)); // var(--button-font-color);
+        // background-color: transparent;
+        @if ($name==light) {
+          background-color: var(--#{light}-#{200});
+        }
+      }
+
+      &:focus {
+        // background-color: transparent;
+        // color: var(--light-500);
+        @if ($name==light) {
+          background-color: var(--#{light}-#{200});
+        }
+      }
+
+      &:active {
+        border-color: var(--button-active-background-color);
+        color: var(--button-font-color);
+        @if ($name==light) {
+          background-color: var(--#{light}-#{300});
+        } @else {
+          background-color: var(--button-active-background-color);
+        }
+      }
+    }
+
+    &:focus {
+      // @extend :focus-visible;
+    }
+
+    &-outline {
+      background-color: transparent;
+      border-style: solid;
+      border-width: 1px;
+    }
+
+    &-ghost {
+      background-color: transparent;
+      border-color: transparent !important;
+    }
+  }
+
+  // @each $key,$value in $item {
+  //   .#{$name}-#{$key} {
+  //     background-color: #{$value};
+  //   }
+  // }
+}

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

@@ -0,0 +1,188 @@
+@use 'sass:map';
+
+$default-color: 5;
+$prefix: '';
+$theme-colors: (
+  'cta': purple,
+  'success': green,
+  'warning': yellow,
+  'danger': red,
+);
+
+$theme: (
+  light: (
+    '1': rgba(255, 255, 255, 1%),
+    '2': rgba(255, 255, 255, 1%),
+    '3': rgba(255, 255, 255, 1%),
+    '4': rgba(255, 255, 255, 1%),
+    '5': rgba(255, 255, 255, 1%),
+    '6': rgba(255, 255, 255, 1%),
+    '7': rgba(255, 255, 255, 1%),
+    '8': rgba(255, 255, 255, 1%),
+    '9': rgba(255, 255, 255, 1%),
+  ),
+  default: (
+    '1': #ddd7f7,
+    '2': #bcafef,
+    '3': #9a87e6,
+    '4': #795fde,
+    '5': #5737d6,
+    '6': #462cab,
+    '7': #342180,
+    '8': #231656,
+    '9': #110b2b,
+  ),
+  primary: (
+    '1': #ddd7f7,
+    '2': #bcafef,
+    '3': #9a87e6,
+    '4': #795fde,
+    '5': #5737d6,
+    '6': #462cab,
+    '7': #342180,
+    '8': #231656,
+    '9': #110b2b,
+  ),
+  secondary: (
+    '1': #e9fdf7,
+    '2': #d4fbee,
+    '3': #bef8e6,
+    '4': #a9f6dd,
+    '5': #93f4d5,
+    '6': #77d4b7,
+    '7': #5cb599,
+    '8': #40957a,
+    '9': #25765c,
+  ),
+  neutral: (
+    '1': #eeedef,
+    '2': #dcdbe0,
+    '3': #cbcad0,
+    '4': #b9b8c1,
+    '5': #a8a6b1,
+    '6': #8b8993,
+    '7': #6e6c74,
+    '8': #515056,
+    '9': #343337,
+  ),
+  info: (
+    '1': #e3f1fb,
+    '2': #c0e5f7,
+    '3': #88d1f1,
+    '4': #3cb5e6,
+    '5': #21a1d6,
+    '6': #1382b6,
+    '7': #116793,
+    '8': #12587a,
+    '9': #144a66,
+  ),
+  danger: (
+    '1': #f9dede,
+    '2': #f4bcbd,
+    '3': #ee9b9d,
+    '4': #e9797c,
+    '5': #e3585b,
+    '6': #b94749,
+    '7': #8f3638,
+    '8': #642526,
+    '9': #3a1415,
+  ),
+  error: (
+    '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,
+  ),
+);
+
+@function to-rgb($value) {
+  @return red($value), green($value), blue($value);
+}
+
+@each $color, $item in $theme {
+  // add to theme colors
+  $color-list: (
+    $color: map.get($item, #{$default-color}),
+  );
+  $theme-colors: map.merge($theme-colors, $color-list);
+}
+
+// set variable
+:root {
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-bg-opacity: 1;
+  --el-color-white: white;
+  --el-color-black: black;
+  @each $color, $item in $theme {
+    @each $key, $value in $item {
+      & {
+        // --#{$prefix}#{"#{$color}"}-#{$key}: #{$value};
+        --el-color-#{"#{$color}"}-light-#{$key}: #{$value};
+        @if $key== '5' {
+          --el-color-#{"#{$color}"}: #{$value};
+        }
+      }
+
+      .#{$prefix}#{'#{$color}'}-#{$key} {
+        // color: #{$value};
+      }
+
+      .#{$prefix}bg-#{'#{$color}'}-#{$key} {
+        // background-color: #{$value};
+      }
+
+      // .#{$name}-#{$key} {
+      //   background-color: #{$value};
+      // }
+    }
+  }
+}
+
+// Color Shade and Tint Generator
+// :root {
+//   @mixin variations($name, $color) {
+//     $percentages: (80%, 60%, 40%, 20%, 0, -20%, -40%, -60%, -80%);
+//     @each $percentage in $percentages {
+//       $i: list.index($percentages, $percentage);
+//       $variation: $color;
+//       @if $percentage > 0 {
+//         $variation: color.mix(white, $color, $percentage);
+//       }
+//       @else if $percentage < 0 {
+//         $variation: color.mix(black, $color, $percentage * -1);
+//       }
+//       --bs-#{$name}-#{$i * 1}: #{$variation};
+//     }
+//   }
+//   @each $name, $value in $colors {
+//     @include variations($name, $value);
+//   }
+// }

package/dist/runtime/public/scss/_containers.scss

@@ -0,0 +1,7 @@
+.container {
+  @apply w-full px-4 mx-auto md:max-w-screen-sm lg:max-w-screen-lg xl:max-w-screen-xl 2xl:max-w-screen-xl;
+}
+
+.fluid {
+  @apply w-full px-4;
+}

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

@@ -0,0 +1,85 @@
+$font-prefix: '';
+
+$font-config-h: (
+  h1: (
+    font-size: 24px,
+    line-height: 30px,
+    font-weight: 600,
+  ),
+  h2: (
+    font-size: 20px,
+    line-height: 24px,
+    font-weight: 600,
+  ),
+  h3: (
+    font-size: 18px,
+    line-height: 22px,
+    font-weight: 600,
+  ),
+
+  h4: (
+    font-size: 14px,
+    line-height: 18px,
+    font-weight: 600,
+  ),
+  h5: (
+    font-size: 12px,
+    line-height: 14px,
+    font-weight: 600,
+  ),
+  h6: (
+    font-size: 10px,
+    line-height: 12px,
+    font-weight: 600,
+  ),
+);
+
+$font-config-body: (
+  'p-large': (
+    font-size: 16px,
+    line-height: 22px,
+  ),
+  'p-medium': (
+    font-size: 14px,
+    line-height: 24px,
+  ),
+  'p-small': (
+    font-size: 12px,
+    line-height: 16px,
+  ),
+  'p-mini': (
+    font-size: 10px,
+    line-height: 14px,
+  ),
+  'p-tiny': (
+    font-size: 8px,
+    line-height: 10px,
+  ),
+);
+
+%h {
+  font-style: normal;
+  // letter-spacing: -0.02rem;letter-spacingletter-spacingletter-spacingletter-spacingletter-spacing
+  margin: 0;
+}
+
+@each $selector, $value in $font-config-h {
+  #{$selector},
+  .#{$selector},
+  %#{$selector} {
+    @extend %h;
+    @each $prop-name, $prop-value in $value {
+      --#{$font-prefix}-#{$selector}-#{$prop-name}: #{$prop-value};
+      #{$prop-name}: var(--#{$font-prefix}-#{$selector}-#{$prop-name});
+    }
+  }
+}
+@each $selector, $value in $font-config-body {
+  .#{$selector},
+  %#{$selector} {
+    @each $prop-name, $prop-value in $value {
+      --#{$font-prefix}-#{$selector}-#{$prop-name}: #{$prop-value};
+      #{$prop-name}: var(--#{$font-prefix}-#{$selector}-#{$prop-name});
+    }
+  }
+}

package/dist/runtime/public/scss/_icons.scss

@@ -0,0 +1,124 @@
+$icon-prefix: 'icon';
+$icon-config: (
+  'xxs': (
+    min-width: 0.75rem,
+    min-height: 0.75rem,
+    font-size: 0.75rem,
+  ),
+  'xs': (
+    min-width: 1rem,
+    min-height: 1rem,
+    font-size: 1rem,
+  ),
+  'sm': (
+    min-width: 1.25rem,
+    min-height: 1.25rem,
+    font-size: 1.25rem,
+  ),
+  'md': (
+    min-width: 1.25rem,
+    min-height: 1.25rem,
+    font-size: 1.25rem,
+  ),
+  'lg': (
+    min-width: 1.5rem,
+    min-height: 1.5rem,
+    font-size: 1.5rem,
+  ),
+  'xl': (
+    min-width: 1.75rem,
+    min-height: 1.75rem,
+    font-size: 1.75rem,
+  ),
+  'xxl': (
+    min-width: 2em,
+    min-height: 2rem,
+    font-size: 2rem,
+  ),
+);
+
+%icon {
+  align-items: center;
+  display: flex;
+  gap: 4px;
+  position: relative;
+  @each $size, $value in $icon-config {
+    &-#{$size} {
+      &::before,
+      &::after {
+        @each $prop-name, $prop-value in $value {
+          --#{$icon-prefix}-#{$size}-#{$prop-name}: #{$prop-value};
+          #{$prop-name}: var(--#{$icon-prefix}-#{$size}-#{$prop-name});
+        }
+      }
+    }
+  }
+
+  &::before {
+    // margin-left: -2px;margin-leftmargin-leftmargin-left
+  }
+
+  &::after {
+    // content: none;contentcontentcontent
+    // margin-right: 2px;margin-rightmargin-rightmargin-right
+  }
+
+  &-left {
+    &::before {
+      content: '';
+    }
+
+    &::after {
+      content: none;
+    }
+  }
+
+  &-right {
+    &::before {
+      content: none;
+    }
+
+    &::after {
+      // content: '';contentcontentcontent
+    }
+
+    &-outline {
+      &::before {
+        right: 0;
+      }
+    }
+  }
+}
+
+[class^='#{$icon-prefix}'],
+[class*=' #{$icon-prefix}'] {
+  @extend %icon;
+
+  &:empty {
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+
+    &::before,
+    &::after {
+      margin: 0;
+    }
+  }
+}
+
+@each $size, $value in $icon-config {
+  [class^='#{$icon-prefix}-#{$size}'],
+  [class*=' #{$icon-prefix}-#{$size}'] {
+    @extend %icon-#{$size};
+  }
+}
+
+[class^='#{$icon-prefix}-right'],
+[class*=' #{$icon-prefix}-right'] {
+  @extend %icon-right;
+}
+
+[class^='#{$icon-prefix}-left'],
+[class*=' #{$icon-prefix}-left'] {
+  @extend %icon-left;
+}