added modifications for tab and tab item

src/base/variable.less

@@ -160,11 +160,11 @@
 @ColorSecondaryGrey60: var(--ColorSecondaryGrey60, #b5b5b5);
 @ColorSecondaryGrey40: var(--ColorSecondaryGrey40, #e0e0e0);
 @ColorSecondaryGrey20: var(--ColorSecondaryGrey20, #f5f5f5);
-@ColorSparkle20: var(--ColorSparkle20, #e8faf7);
-@ColorSparkle30: var(--ColorSparkle30, #a7f6e9);
-@ColorSparkle40: var(--ColorSparkle40, #7aebd9);
+@ColorSparkle20: var(--ColorSparkle20, #e5f1f7);
+@ColorSparkle30: var(--ColorSparkle30,#89dcff);
+@ColorSparkle40: var(--ColorSparkle40, #67c3ef);
 @ColorSparkle50: var(--ColorSparkle50, #1eccb0);
-@ColorSparkle60: var(--ColorSparkle60, #1e7b74);
+@ColorSparkle60: var(--ColorSparkle60, #0c5273);
 @ColorSparkle70: var(--ColorSparkle70, #0e5c4f);
 @ColorSparkle80: var(--ColorSparkle80, #08332c);
 @ColorSparkleInverse: var(--ColorSparkleInverse, #08332c);

src/components/NAvatar/NAvatar.vue

@@ -0,0 +1,124 @@
+<template>
+    <div :style="avatarStyle" 
+    :class="{
+      'hover-bg': kind === 'image' && isClickable,
+      'hover-svg': kind === 'default' && isClickable,
+      'hover-initials': kind === 'initials' && isClickable
+    }"
+    aria-label="Avatar">
+      <img v-if="image && kind === 'image'" :src="image" alt="User Avatar" :style="imageStyle" />
+      <span v-else-if="initials && kind === 'initials'" class="textStyle"> {{ userInitials }}</span>
+      <svg v-else viewBox="0 0 24 24"  class="custom-fill-color" xmlns="http://www.w3.org/2000/svg" :transform="iconScaleTransform">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M 10.78 10.84 C 11.5508 11.0561 12.3652 11.0631 13.1396 10.8604 C 13.914 10.6577 14.6204 10.2525 15.1865 9.68648 C 15.7525 9.12045 16.1577 8.41396 16.3604 7.63957 C 16.5631 6.86518 16.5561 6.05078 16.34 5.28001 C 16.1352 4.53403 15.7399 3.85415 15.1929 3.30715 C 14.6459 2.76014 13.966 2.36482 13.22 2.16001 C 12.4492 1.94392 11.6348 1.93688 10.8604 2.1396 C 10.086 2.34232 9.37956 2.7475 8.81353 3.31353 C 8.2475 3.87956 7.84232 4.58605 7.6396 5.36044 C 7.43688 6.13484 7.44392 6.94923 7.66 7.72001 C 7.86481 8.46598 8.26014 9.14586 8.80714 9.69286 C 9.35415 10.2399 10.034 10.6352 10.78 10.84 Z M 12 12 C 9.87827 12 7.84344 12.8429 6.34315 14.3432 C 4.84285 15.8434 4 17.8783 4 20 C 4 20.5304 4.21071 21.0391 4.58579 21.4142 C 4.96086 21.7893 5.46957 22 6 22 H 18 C 18.5304 22 19.0391 21.7893 19.4142 21.4142 C 19.7893 21.0391 20 20.5304 20 20 C 20 17.8783 19.1571 15.8434 17.6569 14.3432 C 16.1566 12.8429 14.1217 12 12 12 Z"
+        ></path>
+      </svg>
+    </div>
+  </template>
+
+  <script>
+  export default {
+    name:"nitrozen-avatar",
+    props: {
+      size: {
+        type: String,
+        default: "medium",
+      },
+      kind: {
+        type: String,
+        default: "default"
+      },
+      initials: {
+        type: String,
+        default: ""
+      },
+      image: {
+        type: String,
+      },
+      isClickable: {
+        type: Boolean,
+        default:false
+      }
+    },
+    computed: {
+      avatarStyle() {
+        const sizes = {
+          small: "1.5rem",
+          medium: "2rem",
+          large: "2.5rem",
+          xsmall : "1rem",
+          xlarge: "3rem",
+          xxlarge: "7.5rem"
+
+        };
+
+        const sizeValue = sizes[this.size] || sizes["medium"];
+        return {
+          width: sizeValue,
+          height: sizeValue,
+        };
+      },
+    iconScaleTransform() {
+      const scaleFactor = 0.7;
+      return `scale(${scaleFactor})`;
+    },
+    imageStyle() {
+      return {
+        width: "100%",
+        height: "100%",
+        borderRadius: "50%",
+        objectFit:"cover"
+      };
+    },
+    userInitials() {
+      const names = this.initials.trim().split(" ");
+      if (names.length >= 2) {
+        return names[0][0].toUpperCase() + names[1][0].toUpperCase();
+      } else {
+        return names[0][0].toUpperCase() + names[0][1].toUpperCase();
+      }
+    },
+    },
+  };
+  </script>
+
+  <style lang="less" scoped>
+  @import "./../../base/base.less";
+
+  div[aria-label="Avatar"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: @ColorSparkle20;
+  }
+
+div[aria-label="Avatar"].hover-bg:hover img{
+  filter: brightness(110%);
+}
+
+div[aria-label="Avatar"].hover-svg:hover,
+div[aria-label="Avatar"].hover-svg:hover svg path {
+  fill: @ColorPrimary60;
+}
+
+div[aria-label="Avatar"].hover-initials:hover {
+  background: @ColorSparkle40;
+}
+  .custom-fill-color path {
+  fill: @ColorPrimary50;
+  }
+
+  .textStyle{
+    font-family: @PrimaryFont;
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.5;
+    letter-spacing: -0.0044rem;
+    text-transform: none;
+    color: @ColorSparkle60;
+  }
+  </style>
+

src/components/NAvatar/index.js

@@ -0,0 +1,2 @@
+import NAvatar from './NAvatar.vue';
+export default NAvatar;

src/components/NSearchBox/NSearchBox.vue

@@ -0,0 +1,161 @@
+<template>
+    <div class="j-search-box has-prefix has-suffix search-container"
+    :class="{ 'disable-hover': disableHover }">
+        <span class="input-icon input-icon-prefix" tabindex="-1">
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M10.004 2a7 7 0 015.6 11.19l6.11 6.1a1.002 1.002 0 01-.325 1.639.999.999 0 01-1.095-.219l-6.1-6.11A7 7 0 1110.004 2zm0 12a5 5 0 100-10 5 5 0 000 10z"
+                    fill="currentColor">
+                </path>
+            </svg>
+        </span>
+        <input type="search" :aria-label="label" :placeholder="label" v-model="searchText" class="hoverable" :style="{ paddingRight: showIcon ? '3em' :'1rem' }">
+        <span class="input-icon input-icon-suffix clickable hoverable" tabindex="0"
+        :style="{ width: showIcon ? '1.5em' : '0' }">
+            <img v-if="icon && showIcon" :src="icon" class="icon-image"/>
+        </span>
+    </div>
+</template>
+<script>
+export default {
+    name: "nitrozen-search-box",
+    props: {
+        kind: {
+        type: String,
+        default: "normal"
+      },
+      disableHover: {
+      type: Boolean,
+      default: false,
+    },
+      suffix:{
+        type: String,
+        default:''
+      },
+      label:{
+        type: String,
+        default: "Search Jio"
+      },
+      icon: {
+        type: String,
+      },
+    },
+  data() {
+    return{
+      searchText: "",
+      showIcon: true,
+    }
+  },
+  watch: {
+    searchText() {
+      this.showIcon = this.searchText === "";
+    },
+  }
+};
+
+</script>
+<style lang="less" scoped>
+@import "./../../base/base.less";
+.j-search-box input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  height: 1em;
+  width: 1em;
+  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%232e31a1' viewBox='0 0 24 24'><path d='M12 2a10 10 0 100 20 10 10 0 000-20zm3.71 12.29a1.002 1.002 0 01-.325 1.639 1 1 0 01-1.095-.219L12 13.41l-2.29 2.3a1 1 0 01-1.639-.325 1 1 0 01.219-1.095l2.3-2.29-2.3-2.29a1.004 1.004 0 011.42-1.42l2.29 2.3 2.29-2.3a1.004 1.004 0 011.42 1.42L13.41 12l2.3 2.29z'/></svg>");
+  background-repeat: no-repeat;
+  background-size: 1em;
+  background-position: center;
+  appearance: none;
+}
+
+.icon-image{
+    width: 100%;
+}
+.j-search-box {
+    position: relative;
+    width: auto;
+}
+
+.j-search-box label{
+    font-size: 1.2rem;
+}
+
+.j-search-box .input-icon.input-icon-prefix {
+    color: @ColorPrimaryGrey80;
+    left: @SpacingS;
+}
+
+.j-search-box .input-icon {
+    position: absolute;
+    box-sizing: border-box;
+    top: 0;
+    line-height: 0;
+    border-radius: @RadiusSmall;
+    width: 1.5em;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    transform: none;
+    z-index: auto;
+}
+
+.j-search-box input {
+    font-family: @PrimaryFont;
+    font-weight: 500;
+    text-transform: none;
+    font-size: 0.25rem;
+    letter-spacing: -0.0044rem;
+    line-height: 1.5;
+    padding-right: 3em;
+}
+
+
+.j-search-box:not(.disable-hover):hover .input-icon-clear {
+  display: none;
+}
+
+.j-search-box.has-prefix input {
+    padding-left: 3em;
+}
+
+
+.j-search-box .input-icon svg {
+    height: 100%;
+    width: 100%;
+}
+
+.j-search-box .input-icon.input-icon-suffix {
+    color: @ColorPrimary60;
+    right: @SpacingS;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+// .search-container:hover .input-icon.input-icon-prefix svg path,
+// .search-container:hover input::placeholder {
+//   color: @DefaultColor;
+// }
+
+.j-search-box:not(.disable-hover):hover .input-icon.input-icon-prefix svg path,
+.j-search-box:not(.disable-hover):hover input::placeholder {
+  color: @DefaultColor;
+}
+.j-search-box input {
+    -webkit-appearance: none;
+    appearance: none;
+    border: none;
+    border-radius: @RadiusPill;
+    background-color: @ColorPrimaryGrey20;
+    width: 100%;
+    padding: @SpacingS @SpacingBase;
+    padding-right: @SpacingS;
+    color: @ColorPrimaryGrey100;
+    outline: none;
+    font-family: @PrimaryFont;
+    font-weight: 500;
+    text-transform: none;
+    font-size: 1.5rem;
+    letter-spacing: -0.08px;
+    line-height: 1.5;
+}
+</style>

src/components/NSearchBox/index.js

@@ -0,0 +1,2 @@
+import NSearchBox from './NSearchBox.vue';
+export default NSearchBox;