Venkat7 jds

src/base/base.less

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

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/components/NBadge/NBadge.vue

@@ -115,10 +115,6 @@ export default {
 <style lang="less">
 @import "./../../base/base.less";
 
-.nitrozen-badge-text{
-  margin: 0 0.5rem;
-}
-
 .nitrozen-border-primary {
   border: 0.1rem solid @PrimaryColor;
 }
@@ -165,7 +161,7 @@ export default {
 
 .nitrozen-badge {
   height: 1.6rem;
-  padding: 0.4rem 0.8rem;
+  padding: 8px 16px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -239,11 +235,11 @@ export default {
     letter-spacing: -0.005em;
   }
   &.nitrozen-badge-medium {
-    font-size: @BaseFontSize + 4;
+    font-size: @BaseFontSize + 6;
   }
   &.nitrozen-badge-large {
-    font-size: @BaseFontSize + 8;
-    padding: 0.4rem 0.8rem;
+    font-size: @BaseFontSize + 14;
+    padding: 8px 24px;
     line-height: 2.4rem;
     letter-spacing: -0.005em;
   }

src/components/NBnb/NBnb.vue

@@ -0,0 +1,87 @@
+<template>
+  <nav class="bottom-nav">
+    <a
+      v-for="(item, index) in items"
+      :key="index"
+      :href="item.href"
+      :aria-label="item['aria-label']"
+      @click="handleItemClick(item)"
+      :class="{ active: item.isActive }"
+    >
+      <div class="icon-wrapper">
+        <div v-html="item.icon"></div>
+      </div>
+      <div v-if="item.title" class="title">{{ item.title }}</div>
+    </a>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: "niotrozen-bottom-nav",
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+  },
+  methods: {
+    handleItemClick(item) {
+  this.items.forEach(navItem => {
+    navItem.isActive = navItem === item;
+  });
+
+  if (!item.disabled && item.onClick) {
+    item.onClick();
+  }
+},
+  },
+};
+</script>
+
+<style lang="less">
+@import "../../../src/base/variable.less";
+
+.bottom-nav {
+  display: flex;
+  justify-content: space-around;
+  background-color: @GreyColor;
+  padding: 16px 24px;
+  gap: 24px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  z-index: 1;
+  left: 0;
+  box-shadow: 0 4px 16px @Shadow;
+
+  a {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-decoration: none;
+    color: @TypographySecondaryColor;
+    &.active {
+    .icon-wrapper {
+      color: @DialogNegativeColor; 
+    }
+    .title {
+      color: @BlackColor; 
+    }
+  }
+    .icon-wrapper {
+      width: 24px;
+      height: 24px;
+    }
+    .title {
+        text-align: center;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 16px; /* 133.333% */
+        letter-spacing: -0.06px;
+        margin-top: 4px;
+    }
+  }
+}
+</style>

src/components/NBnb/index.js

@@ -0,0 +1,3 @@
+import NBnb from './NBnb.vue';
+
+export default NBnb;