Jds components

src/base/base.less

@@ -3,3 +3,5 @@
 @import './typography.less';
 @import './common.less';
 @import './media.less';
+
+

src/base/common.less

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

src/base/jds.less

@@ -0,0 +1,77 @@
+@import './variable.less';
+
+.jm-fc-black {
+	color: @ColorBlack;
+}
+
+.jm-fc-white {
+	color: @ColorWhite;
+}
+
+.jm-fc-primary-grey-40 {
+	color: @ColorSecondaryGrey40;
+}
+
+.jm-fc-primary-grey-60 {
+	color: @ColorSparkleGrey60;
+}
+
+.jm-fc-primary-grey-80 {
+	color: rgba(0, 0, 0, .65);
+}
+
+.jm-fc-primary-grey-100 {
+	color: @ColorSparkleGrey100;
+}
+
+.jm-fc-secondary-50 {
+	color: #e30513;
+}
+
+.jm-fc-primary-20 {
+	color: @ColorSparkle20;
+}
+
+.jm-fc-primary-40 {
+	color: @ColorSparkle40;
+}
+
+.jm-fc-primary-50 {
+	color: #0078ad;
+}
+
+.jm-fc-primary-60 {
+	color: @ColorSparkle60;
+}
+
+.jm-fc-primary-inverse {
+	color: @ColorWhite;
+}
+
+.jm-fc-light-feedback-success-50 {
+	color: @ColorFeedbackSuccess50;
+}
+
+.jm-fc-light-sparkle-60 {
+	color: #03753c;
+}
+
+.jm-fc-light-secondary-grey-100 {
+	color: @ColorPrimaryGrey100;
+}
+
+.jm-fc-light-feedback-error-80 {
+	color: @ColorFeedbackError80 ;
+}
+
+.jm-fc-light-feedback-error-50 {
+	color: @ColorFeedbackError50 ;
+}
+
+.jm-fc-light-feedback-warning-50 {
+	color: @ColorFeedbackWarning50;
+}
+
+.jm-fc-light-feedback-success-80 {
+	color: @ColorFeedbackSuccess80;
+}

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));