jds com fixed

src/base/common.less

@@ -39,6 +39,5 @@ body {
         background-clip: padding-box;
         background: @ScrollBarThumbColor;
         width: 4px;
-        border-radius: 5px;
     }
 }

src/base/mixin.less

@@ -0,0 +1,149 @@
+
+.color-palette(@condition) when (@condition = netmeds) {
+  --ColorPrimary80: #130028; 
+--ColorPrimary70: #1F0042; 
+--ColorPrimary60: #2B005C; 
+--ColorPrimary50: #1ECCB0; 
+--ColorPrimary40: #6D17CE; 
+--ColorPrimary30: #CBA2FA; 
+--ColorPrimary20: #F0E8FA; 
+--ColorPrimaryInverse: #FFFFFF; 
+--ColorPrimarybackground: #FFFFFF; 
+--ColorPrimaryGrey100: #141414; 
+--ColorPrimaryGrey80: rgba(0, 0, 0, 0.65); 
+--ColorPrimaryGrey60: #B5B5B5; 
+--ColorPrimaryGrey40: #E0E0E0; 
+--ColorPrimaryGrey20: #F5F5F5;  
+--ColorSecondary80: #6d17ce; 
+--ColorSecondary70: #660209; 
+--ColorSecondary60: #A80000; 
+--ColorSecondary50: #E30513; 
+--ColorSecondary40: #FC6770; 
+--ColorSecondary30: #FF9DA3; 
+--ColorSecondary20: #FCE6E7; 
+--ColorSecondaryInverse: #FFFFFF;  
+--ColorSparkle80: #D9008D; 
+--ColorSparkle70: #7B1604; 
+--ColorSparkle60: #CD3D00; 
+--ColorSparkle50: #FA7D19; 
+--ColorSparkle40: #FFAA66; 
+--ColorSparkle30: #FFD2AD; 
+--ColorSparkle20: #FEF2E9; 
+--ColorSparkleInverse: #46070B;  
+
+//Semantic Colors 
+--ColorFeedbackError20: #FEE6EA; 
+--ColorFeedbackError50: #F50031; 
+--ColorFeedbackError80: #660014; 
+--ColorFeedbackWarning20: #FEF0E7; 
+--ColorFeedbackWarning50: #F06D0F; 
+--ColorFeedbackWarning80: #7D2F08; 
+--ColorFeedbackSuccess20: #E9F7E9; 
+--ColorFeedbackSuccess50: #25AB21; 
+--ColorFeedbackSuccess80: #135610;  
+--LightLink: #0A2885;  
+--ColorBlack: #141414; 
+--ColorWhite: #FFFFFF; 
+--activeNavigationLink: #AA77E2;
+}
+  .color-palette(@condition) when (@condition = jiomart) {
+
+    --ColorPrimary80: #001e2b;
+
+    --ColorPrimary70: #00364e;
+
+    --ColorPrimary60: #0c5273;
+
+    --ColorPrimary50: #0078ad;
+
+    --ColorPrimary40: #67c3ef;
+
+    --ColorPrimary30: #89dcff;
+
+    --ColorPrimary20: #e5f1f7;
+
+    --ColorPrimaryInverse: #FFFFFF;
+
+    --ColorPrimaryBackground: #FFFFFF;
+
+    --ColorPrimaryGrey100: #141414;
+
+    --ColorPrimaryGrey80: rgba(0, 0, 0, 0.65);
+    --ColorPrimaryGrey60: #b5b5b5;
+    --ColorPrimaryGrey40: #e0e0e0;
+    --ColorPrimaryGrey20: #f5f5f5;
+
+
+
+    --ColorSecondary80: #390105;
+
+    --ColorSecondary70: #660209;
+
+    --ColorSecondary60: #A80000;
+
+    --ColorSecondary50: #E30513;
+
+    --ColorSecondary40: #FC6770;
+
+    --ColorSecondary30: #FF9DA3;
+
+    --ColorSecondary20: #FCE6E7;
+
+    --ColorSecondaryInverse: #FFFFFF;
+
+
+
+    --ColorSparkle80: #46070B;
+
+    --ColorSparkle70: #7B1604;
+
+    --ColorSparkle60: #CD3D00;
+
+    --ColorSparkle50: #FA7D19;
+
+    --ColorSparkle40: #FFAA66;
+
+    --ColorSparkle30: #FFD2AD;
+
+    --ColorSparkle20: #FEF2E9;
+
+    --ColorSparkleInverse: #46070B;
+
+
+
+
+
+    //Semantic Colors
+
+    --ColorFeedbackError20: #FEE6EA;
+
+    --ColorFeedbackError50: #F50031;
+
+    --ColorFeedbackError80: #660014;
+
+    --ColorFeedbackWarning20: #FEF0E7;
+
+    --ColorFeedbackWarning50: #F06D0F;
+
+    --ColorFeedbackWarning80: #7D2F08;
+
+    --ColorFeedbackSuccess20: #E9F7E9;
+
+    --ColorFeedbackSuccess50: #25AB21;
+
+    --ColorFeedbackSuccess80: #135610;
+
+
+
+    --LightLink: #0A2885;
+
+
+
+    --ColorBlack: #141414;
+
+    --ColorWhite: #FFFFFF;
+
+    --activeNavigationLink: #AA77E2;
+  }
+
+

src/base/variable.less

@@ -23,9 +23,8 @@
 // @PrimaryFont: 'Inter', sans-serif;
 
 // @WhiteColor: #ffffff;
-@PrimaryTextColor: #36cc9b;
+@PrimaryTextColor: #1ECCB0;
 // @LabelColor: #9b9b9b;
-
 // @BackgroundColor: #f9f9f9;
 
 // @PlaceholderColor: #a4a4a4;
@@ -86,7 +85,7 @@
 @LabelColor: #9b9b9b;
 @BackgroundColor: #f9f9f9;
 @PlaceholderColor: #a4a4a4;
-@HoverColor: #f3f3f3;
+@HoverColor: #1ECCB0;
 @WarningColor: #f5a300;
 @InfoColor: #605ae0;
 @SuccessColor: #0a5f23;
@@ -122,6 +121,7 @@
 @Gray: #8f8f8f;
 @PinkSwan: #b8b8b8;
 @Lavender: #e6e7f9;
+@selecterSelect : #0a2885;
 ////////////////////////////////////JDS THEME COLOR////////////////////////////////////
 // DEFAULT
 @JDSDefaultColor: #000000a6;
@@ -132,8 +132,8 @@
 @ColorPrimary20Dark: var(--ColorPrimary20Dark, #16164b);
 @ColorPrimary30: var(--ColorPrimary30, #9999ff);
 @ColorPrimary40: var(--ColorPrimary40, #6464ff);
-@ColorPrimary50: var(--ColorPrimary50, #3535f3);
-@ColorPrimary60: var(--ColorPrimary60, #000093);
+@ColorPrimary50: var(--ColorPrimary50, #000000);
+@ColorPrimary60: var(--ColorPrimary60, #1ECCB0);
 @ColorPrimary70: var(--ColorPrimary70, #00004c);
 @ColorPrimary80: var(--ColorPrimary80, #010029);
 @ColorPrimaryDisabled: var(--ColorPrimaryDisabled, rgba(0, 0, 0, 0));
@@ -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);
@@ -186,6 +186,8 @@
 @ColorFeedbackSuccess50: var(--ColorFeedbackSuccess50, #25ab21);
 @ColorFeedbackSuccess20: var(--ColorFeedbackSuccess20, #e9f7e9);
 @DarkPrimary60: var(--DarkPrimary60, #7f7ffb);
+@lightLink : var(--LightLink, #097381);
+@activeNavigationLink : var(--activeNavigationLink, #7f7ffb);
 
 ////////////////////////////////////Shadow////////////////////////////////////
 @ShadowS: var(--ShadowS, 0px 4px 16px rgba(0, 0, 0, 0.08));

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;