@egovernments/digit-ui-components-css 0.2.3 → 2.0.0-dev-01

package/src/index.scss

@@ -1,6 +1,6 @@
 /*@import 'normalize.css';*/
 
-/*@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap");*/
+/*@import "https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap";*/
 
 @import "tailwindcss/base";
 
@@ -14,8 +14,8 @@
 
 @import "./pages/employee/index.scss";
 @import "./pages/employee/login.scss";
-
 @import "./digitv2/index.scss";
+
 @import "./digitv2/typography.scss";
 
 
@@ -104,12 +104,12 @@ h1, h2, h3, h4, h5, h6 {
   margin-bottom: 16px;
 
   a {
-    color: theme(colors.link.normal);
+    color: theme("colors.link.normal");
   }
 }
 
 .clear-search-label {
-  color: theme(colors.primary.main);
+  color: theme("colors.primary.main");
   cursor: pointer;
 }
 
@@ -122,7 +122,7 @@ h1, h2, h3, h4, h5, h6 {
   @apply flex justify-between items-center;
 
   .download-button {
-    color: theme(colors.primary.main);
+    color: theme("colors.primary.main");
     margin-left: 8px;
   }
 }
@@ -131,13 +131,13 @@ h1, h2, h3, h4, h5, h6 {
   @apply flex mb-sm;
 
   .download-button {
-    color: theme(colors.primary.main);
+    color: theme("colors.primary.main");
     margin-left: 8px;
   }
 }
 
 .check-page-link-button {
-  color: theme(colors.primary.main) !important;
+  color: theme("colors.primary.main") !important;
 }
 
 .pt-application-download-btn {
@@ -160,10 +160,10 @@ h1, h2, h3, h4, h5, h6 {
   gap: 10px;
 
   svg {
-    fill: theme(colors.primary.main);
+    fill: theme("colors.primary.main");
   }
 
-  color: theme(colors.primary.main);
+  color: theme("colors.primary.main");
 
   cursor: pointer;
   font-weight: 500;
@@ -171,13 +171,13 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .primaryColor {
-  color: theme(colors.text.primary) !important;
+  color: theme("colors.text.primary") !important;
 }
 
 input[readonly] {
-  background-color:  theme(digitv2.lightTheme.generic-background);
-  border-color: theme(digitv2.lightTheme.text-secondary);
-  color: theme(digitv2.lightTheme.text-secondary);
+  background-color:  theme("digitv2.lightTheme.generic-background");
+  border-color: theme("digitv2.lightTheme.text-secondary");
+  color: theme("digitv2.lightTheme.text-secondary");
   --border-opacity: 1;
   border-color: #9E9E9E;
   border-color: rgba(158, 158, 158, var(--border-opacity));
@@ -212,7 +212,8 @@ input[readonly] {
 }
 
 .card-date-input {
-  @apply absolute top-0 left-0 w-3/4 bg-white pl-sm border border-input-border border-solid border-r-0;
+  @apply absolute top-0 left-0 w-3/4 bg-white pl-sm border-input-border border-solid border-r-0;
+  border-width: 1px;
   outline: transparent solid 1px;
   height: 2.5rem;
 }
@@ -225,7 +226,7 @@ input[readonly] {
   width: 194px;
   height: 2.5rem;
   &__wrapper {
-    border: 2px solid theme(colors.text.primary);
+    border: 2px solid theme("colors.text.primary");
     padding-left: 16px;
   }
   &__inputGroup__input {
@@ -330,7 +331,7 @@ input[type="number"] {
 
 .cheque-date {
   @apply flex items-center mb-lg;
-  border: 2px solid theme(colors.text.primary);
+  border: 2px solid theme("colors.text.primary");
   border-radius: 2px;
 
   input {
@@ -355,7 +356,7 @@ input[type="number"] {
 
 .ifsc-field {
   @apply flex items-center mb-lg;
-  border: 2px solid theme(colors.text.primary);
+  border: 2px solid theme("colors.text.primary");
   border-radius: 2px;
 
   input {
@@ -479,7 +480,7 @@ input[type="number"] {
       padding: 8px 24px;
       color: white;
       cursor: pointer;
-      background-color: theme(colors.primary.main);
+      background-color: theme("colors.primary.main");
     }
   }
 }
@@ -647,7 +648,7 @@ input[type="number"] {
 .modal-body-ws {
   padding: 1rem;
   font-weight: 700;
-  color: theme(colors.text.primary);
+  color: theme("colors.text.primary");
   font-size: 24px;
   margin-bottom: 1rem;
 }
@@ -676,3 +677,11 @@ input[type="number"] {
   max-height: 120px;
   margin-top: 90px;
 }
+
+*:focus-visible {
+    outline: 2px solid #b91900 !important;
+}
+
+.spanWrapper .submit-bar:focus-visible{
+    outline: 2px solid #b91900 !important;
+}

package/src/pages/employee/index.scss

@@ -58,7 +58,7 @@
       margin-top: 12px;
 
       .user-img-txt {
-        background: theme(colors.primary.main);
+        background: theme("colors.primary.main");
         padding: 10px 15px;
         border-radius: 50%;
         color: white;
@@ -93,7 +93,7 @@
   }
 
   .react-time-picker__wrapper {
-    border: 1px solid theme(colors.inputBorder);
+    border: 1px solid theme("colors.inputBorder");
   }
 
   .react-time-picker__clock {
@@ -131,7 +131,7 @@
     left: 0;
     background: #0B4B66;
     height: 100%;
-    color: theme(colors.white);
+    color: theme("colors.white");
     margin-top: 83px;
     z-index: 999;
     transition: 0.3s ease all;
@@ -154,7 +154,7 @@
     svg {
       width: 24px;
       height: 24px;
-      fill: theme(colors.white);
+      fill: theme("colors.white");
     }
 
     a {
@@ -163,7 +163,7 @@
 
     .sidebar-link {
       display: flex;
-      color: theme(colors.white);
+      color: theme("colors.white");
       justify-content: space-between;
       align-items: center;
       padding: 20px;
@@ -179,12 +179,12 @@
       }
 
       &.active {
-        color: theme(colors.primary.main) !important;
+        color: theme("colors.primary.main") !important;
 
         border-right: none;
 
         svg {
-          fill: theme(colors.primary.main) !important;
+          fill: theme("colors.primary.main") !important;
         }
       }
 
@@ -207,7 +207,7 @@
       }
 
       svg {
-        fill: theme(colors.white) !important;
+        fill: theme("colors.white") !important;
         width: 21px;
         height: 21px;
       }
@@ -221,17 +221,17 @@
       }
 
       .search-icon-wrapper {
-        border: 2px solid theme(colors.white);
+        border: 2px solid theme("colors.white");
         border-radius: 4px;
         padding: 5px;
 
         svg {
-          fill: theme(colors.white) !important;
+          fill: theme("colors.white") !important;
           width: 21px;
           height: 21px;
 
           path {
-            fill: theme(colors.white) !important;
+            fill: theme("colors.white") !important;
           }
         }
       }
@@ -243,7 +243,7 @@
       margin-left: 40px;
       align-items: center;
       text-decoration: none;
-      color: theme(colors.white);
+      color: theme("colors.white");
       font-size: 14px;
 
       .actions {
@@ -256,7 +256,7 @@
       svg {
         width: 20px;
         height: 20px;
-        fill: theme(colors.white);
+        fill: theme("colors.white");
       }
 
       &:hover {
@@ -271,25 +271,25 @@
 
 
       &.active {
-        border-left: 4px solid theme(colors.primary.main);
+        border-left: 4px solid theme("colors.primary.main");
 
         &.level-0 {}
 
         &.level-1 {
-          border-left: 8.5px solid theme(colors.primary.main);
+          border-left: 8.5px solid theme("colors.primary.main");
         }
 
         &.level-2 {
-          border-left: 4px solid theme(colors.primary.main);
+          border-left: 4px solid theme("colors.primary.main");
         }
 
         &.level-3 {}
 
-        color: theme(colors.primary.main) !important;
+        color: theme("colors.primary.main") !important;
         border-right: none;
 
         svg {
-          fill: theme(colors.primary.main) !important;
+          fill: theme("colors.primary.main") !important;
         }
       }
     }
@@ -308,7 +308,7 @@
     padding-top: 10px;
 
     .containerStyles {
-      border: 1px solid theme(colors.text.secondary);
+      border: 1px solid theme("colors.text.secondary");
       padding: 16px;
       margin-bottom: 20px;
     }
@@ -323,7 +323,7 @@
   }
 
   .tableContainerStyles {
-    border: 1px solid theme(colors.text.secondary);
+    border: 1px solid theme("colors.text.secondary");
     padding: 16px;
     margin-bottom: 20px;
   }
@@ -434,7 +434,7 @@
     margin-bottom: unset;
 
     svg {
-      fill: theme(colors.white);
+      fill: theme("colors.white");
     }
   }
 }
@@ -468,7 +468,7 @@
       flex-direction: column;
       padding-top: 80px;
       margin-left: 72px;
-      width: calc(100%-83px);
+      width: calc(100% - 83px);
     }
 
     .citizen-home-container {
@@ -539,11 +539,11 @@
 
   .top-back-btn {
     margin-bottom: 0px;
-    color: theme(colors.white);
+    color: theme("colors.white");
     margin-right: 1em;
 
     & svg {
-      fill: theme(colors.white);
+      fill: theme("colors.white");
     }
   }
 
@@ -593,7 +593,7 @@
 
     div {
       span {
-        color: theme(colors.primary.main) !important;
+        color: theme("colors.primary.main") !important;
         text-decoration: none;
       }
     }
@@ -613,7 +613,7 @@
 
     div {
       span {
-        color: theme(colors.white);
+        color: theme("colors.white");
         text-decoration: none;
       }
     }

package/src/pages/employee/login.scss

@@ -66,7 +66,7 @@
   font-weight: normal;
   font-size: 16px;
   line-height: 19px;
-  color: theme(colors.text.primary);
+  color: theme("colors.text.primary");
   margin-top: 20px;
 }
 .banner .bannerHeader {
@@ -76,7 +76,7 @@
   font-weight: normal;
   font-size: 16px;
   line-height: 19px;
-  color: theme(colors.text.primary);
+  color: theme("colors.text.primary");
 }
 .profile-label-margin{
    margin-top: 10px;
@@ -86,13 +86,13 @@
   font-weight: normal;
   font-size: 16px;
   line-height: 24px;
-  color: theme(colors.text.secondary);
+  color: theme("colors.text.secondary");
   margin-top: 15px;
 }
 .employeeChangePassword .employeeCard .card-text {
   margin-bottom: 15px;
   font-size: 16px;
-  color: theme(colors.text.secondary);
+  color: theme("colors.text.secondary");
 }
 @media screen and (max-width: 768px) {
   .employeeChangePassword .employeeCard .card-text {

package/src/theme-variables.css

@@ -0,0 +1,137 @@
+/* Auto-generated from tailwind.config.js */
+/* Generated: 2025-08-22T06:22:58.708Z */
+/* DO NOT EDIT MANUALLY - Run 'npm run generate-theme' to update */
+
+:root {
+  --digitv2-lightTheme-text-color-primary: #0B0C0C;
+  --digitv2-lightTheme-primary-1: #C84C0E;
+  --digitv2-lightTheme-primary-bg: #FBEEE8;
+  --digitv2-lightTheme-primary-2: #0B4B66;
+  --digitv2-lightTheme-text-primary: #363636;
+  --digitv2-lightTheme-text-secondary: #787878;
+  --digitv2-lightTheme-text-disabled: #C5C5C5;
+  --digitv2-lightTheme-alert-error: #B91900;
+  --digitv2-lightTheme-alert-errorbg: #FFF5F4;
+  --digitv2-lightTheme-alert-success: #00703C;
+  --digitv2-lightTheme-alert-successbg: #F1FFF8;
+  --digitv2-lightTheme-alert-warning: #9E5F00;
+  --digitv2-lightTheme-alert-warning-bg: #FFF9F0;
+  --digitv2-lightTheme-alert-info: #0057BD;
+  --digitv2-lightTheme-alert-infobg: #DEEFFF;
+  --digitv2-lightTheme-generic-background: #EEEEEE;
+  --digitv2-lightTheme-generic-divider: #D6D5D4;
+  --digitv2-lightTheme-generic-inputborder: #505A5F;
+  --digitv2-lightTheme-paper-primary: #FFFFFF;
+  --digitv2-lightTheme-paper-secondary: #FAFAFA;
+  --digitv2-alert-error: #D4351C;
+  --digitv2-alert-error-bg: #EFC7C1;
+  --digitv2-alert-success: #00703C;
+  --digitv2-alert-success-bg: #BAD6C9;
+  --digitv2-alert-info: #3498DB;
+  --digitv2-alert-info-bg: #C7E0F1;
+  --digitv2-chart-chart-1: #048BD0;
+  --digitv2-chart-chart-1-gradient: #048BD0;
+  --digitv2-chart-chart-2: #FBC02D;
+  --digitv2-chart-chart-2-gradient: #FBC02D;
+  --digitv2-chart-chart-3: #8E29BF;
+  --digitv2-chart-chart-4: #EA8A3B;
+  --digitv2-chart-chart-5: #0BABDE;
+  --digitv2-fontSize-heading-xl-mobile: 2rem;
+  --digitv2-fontSize-heading-xl-tablet: 2.25rem;
+  --digitv2-fontSize-heading-xl-desktop: 2.5rem;
+  --digitv2-fontSize-heading-l-mobile: 1.5rem;
+  --digitv2-fontSize-heading-l-tablet: 1.75rem;
+  --digitv2-fontSize-heading-l-desktop: 2rem;
+  --digitv2-fontSize-heading-m-mobile: 1.25rem;
+  --digitv2-fontSize-heading-m-tablet: 1.25rem;
+  --digitv2-fontSize-heading-m-desktop: 1.25rem;
+  --digitv2-fontSize-heading-s-mobile: 1rem;
+  --digitv2-fontSize-heading-s-tablet: 1rem;
+  --digitv2-fontSize-heading-s-desktop: 1rem;
+  --digitv2-fontSize-heading-xs-mobile: 0.75rem;
+  --digitv2-fontSize-heading-xs-tablet: 0.875rem;
+  --digitv2-fontSize-heading-xs-desktop: 0.875rem;
+  --digitv2-fontSize-caption-l-mobile: 1.5rem;
+  --digitv2-fontSize-caption-l-tablet: 1.75rem;
+  --digitv2-fontSize-caption-l-desktop: 1.75rem;
+  --digitv2-fontSize-caption-m-mobile: 1.25rem;
+  --digitv2-fontSize-caption-m-tablet: 1.5rem;
+  --digitv2-fontSize-caption-m-desktop: 1.5rem;
+  --digitv2-fontSize-caption-s-mobile: 1rem;
+  --digitv2-fontSize-caption-s-tablet: 1.25rem;
+  --digitv2-fontSize-caption-s-desktop: 1.25rem;
+  --digitv2-fontSize-body-l-mobile: 1rem;
+  --digitv2-fontSize-body-l-tablet: 1.25rem;
+  --digitv2-fontSize-body-l-desktop: 1.25rem;
+  --digitv2-fontSize-body-s-mobile: 0.875rem;
+  --digitv2-fontSize-body-s-tablet: 1rem;
+  --digitv2-fontSize-body-s-desktop: 1rem;
+  --digitv2-fontSize-body-xs-mobile: 0.75rem;
+  --digitv2-fontSize-body-xs-tablet: 0.875rem;
+  --digitv2-fontSize-body-xs-desktop: 0.875rem;
+  --digitv2-fontSize-label-mobile: 1rem;
+  --digitv2-fontSize-label-tablet: 1rem;
+  --digitv2-fontSize-label-desktop: 1rem;
+  --digitv2-fontSize-link-l-mobile: 1rem;
+  --digitv2-fontSize-link-l-tablet: 1.25rem;
+  --digitv2-fontSize-link-l-desktop: 1.25rem;
+  --digitv2-fontSize-link-s-mobile: 0.875rem;
+  --digitv2-fontSize-link-s-tablet: 1rem;
+  --digitv2-fontSize-link-s-desktop: 1rem;
+  --digitv2-fontSize-link-xs-mobile: 0.75rem;
+  --digitv2-fontSize-link-xs-tablet: 0.875rem;
+  --digitv2-fontSize-link-xs-desktop: 0.875rem;
+  --digitv2-fontSize-button-large: 1.25rem;
+  --digitv2-fontSize-button-medium: 1rem;
+  --digitv2-fontSize-button-small: 0.875rem;
+  --digitv2-fontFamily-sans: Roboto;
+  --digitv2-fontFamily-rc: "Roboto Condensed";
+  --digitv2-fontStyle-normal: normal;
+  --digitv2-fontStyle-italic: italic;
+  --digitv2-textDecorationLine-underline: underline;
+  --digitv2-fontWeight-regular: 400;
+  --digitv2-fontWeight-medium: 500;
+  --digitv2-fontWeight-bold: 700;
+  --digitv2-lineHeight-line-height-body-l-mobile: 1.5rem;
+  --digitv2-lineHeight-line-height-body-l-tablet: 1.75rem;
+  --digitv2-lineHeight-line-height-body-l-desktop: 1.75rem;
+  --digitv2-lineHeight-line-height-body-s-mobile: 1.0938rem;
+  --digitv2-lineHeight-line-height-body-s-tablet: 1.5rem;
+  --digitv2-lineHeight-line-height-body-s-desktop: 1.5rem;
+  --digitv2-lineHeight-line-height-body-xs-mobile: 1.125rem;
+  --digitv2-lineHeight-line-height-body-xs-tablet: 1.5rem;
+  --digitv2-lineHeight-line-height-body-xs-desktop: 1.5rem;
+  --digitv2-lineHeight-normal: normal;
+  --digitv2-lineHeight-lineheight1: 1.14rem;
+  --digitv2-lineHeight-lineheight2: 1.37rem;
+  --digitv2-screens-mobile: 400px;
+  --digitv2-screens-tablet: 768px;
+  --digitv2-screens-desktop: 1024px;
+  --digitv2-spacers-spacer0: 0rem;
+  --digitv2-spacers-spacer1: 0.25rem;
+  --digitv2-spacers-spacer2: 0.5rem;
+  --digitv2-spacers-spacer3: 0.75rem;
+  --digitv2-spacers-spacer4: 1rem;
+  --digitv2-spacers-spacer5: 1.25rem;
+  --digitv2-spacers-spacer6: 1.5rem;
+  --digitv2-spacers-spacer7: 1.75rem;
+  --digitv2-spacers-spacer8: 2rem;
+  --digitv2-spacers-spacer9: 2.25rem;
+  --digitv2-spacers-spacer10: 2.5rem;
+  --digitv2-spacers-spacer11: 2.75rem;
+  --digitv2-spacers-spacer12: 3rem;
+  --digitv2-spacers-spacer13: 3.5rem;
+  --digitv2-divider-dividerS: 0.063rem solid #D6D5D4;
+  --digitv2-divider-dividerM: 0.125rem solid #D6D5D4;
+  --digitv2-divider-dividerL: 0.25rem solid #D6D5D4;
+}
+
+/* Usage Examples:
+.your-component {
+  gap: var(--digitv2-spacers-spacer3);
+  padding: var(--digitv2-spacers-spacer4);
+  color: var(--digitv2-lightTheme-text-primary);
+  font-family: var(--digitv2-fontFamily-sans);
+  font-size: var(--digitv2-fontSize-heading-s-mobile);
+}
+*/