@egovernments/digit-ui-components-css 0.0.2-beta.24 → 0.0.2-beta.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components-css",
-  "version": "0.0.2-beta.24",
+  "version": "0.0.2-beta.25",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egovernments.org>",

package/src/digitv2/components/bottomSheetV2.scss

@@ -64,7 +64,18 @@
   overflow-y: scroll;
   display: flex;
   flex-direction: column;
-  gap: theme(digitv2.spacers.spacer4);
+
+  @media (max-aspect-ratio: 9/16) {
+    gap:theme(digitv2.spacers.spacer4);
+  }
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    gap:theme(digitv2.spacers.spacer5);
+  }
+
+  @media (min-aspect-ratio: 3/4) {
+    gap:theme(digitv2.spacers.spacer6);
+  }
 }
 
 

package/src/digitv2/components/breadcrumbV2.scss

@@ -20,6 +20,25 @@
 
     .digit-bread-crumb-content {
         @extend .typography.body-s;
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+    
+        @media (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.body-s.mobile);
+        }
+    
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.body-s.tablet);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.body-s.desktop);
+        }
         display: flex !important;
         gap: theme(digitv2.spacers.spacer1);
         cursor: pointer;
@@ -44,6 +63,25 @@
     .digit-bread-crumb-content.current,
     .digit-bread-crumb-seperator {
         @extend .typography.body-s;
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+    
+        @media (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.body-s.mobile);
+        }
+    
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.body-s.tablet);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.body-s.desktop);
+        }
         color: theme(digitv2.lightTheme.text-secondary);
         text-decoration: none;
         cursor: default;

package/src/digitv2/components/buttonsV2.scss

@@ -324,34 +324,44 @@
 }
 
 .digit-submit-bar {
-  /* @extend .light-primary-button;*/
-  @apply h-10 text-center w-full outline-none cursor-pointer;
-  box-shadow: inset theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(colors.text.primary);
+  @apply w-full text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
+  padding-left:  theme(digitv2.spacers.spacer6);
+  padding-right:  theme(digitv2.spacers.spacer6);
+  gap:  theme(digitv2.spacers.spacer2);
+  min-width: 15rem;
   background-color: theme(digitv2.lightTheme.primary-1);
 
-  &:focus {
-    @apply outline-none;
-  }
-
   h2 {
-    @apply font-medium text-legend text-white leading-normal;
+    @extend .typography.button.large;
+    @apply text-white;
     margin: 0;
-    font-family: theme(digitv2.fontFamily.sans)
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    @apply h-5;
+    margin-top: 0.125rem;
   }
-}
 
-.digit-submit-bar-disabled {
-  @apply h-10 text-center w-full outline-none opacity-50;
-  background-color: theme(digitv2.lightTheme.primary-1);
+  &.disabled {
+    @apply opacity-50;
+    background: theme(digitv2.lightTheme.text-disabled);
+  }
 
   &:focus {
     @apply outline-none;
   }
 
-  h2 {
-    @apply font-medium text-legend text-white leading-normal;
-    margin: 0;
-    font-family: theme(digitv2.fontFamily.sans)
+  &:hover {
+    box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) theme(digitv2.lightTheme.text-primary) inset;
+  }
+
+  &:active {
+    box-shadow: theme(digitv2.spacers.spacer0) -0.125rem theme(digitv2.spacers.spacer0) theme(digitv2.spacers.spacer0) #0B0C0C inset, theme(digitv2.spacers.spacer0) 0.063rem 0.175rem theme(digitv2.spacers.spacer0) #00000040;
+
+    h2 {
+      font-weight: theme(digitv2.fontWeight.bold);
+    }
   }
 }
 
@@ -393,14 +403,6 @@
   }
 }
 
-@screen dt {
-
-  .digit-submit-bar,
-  .digit-submit-bar-disabled {
-    width: 15rem;
-  }
-}
-
 .digit-submit-bar:focus {
   @apply outline-none !important;
 }

package/src/digitv2/components/checkboxV2.scss

@@ -62,6 +62,25 @@
 
   .label {
     @extend .typography.body-s;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.regular);
+    line-height: theme(digitv2.lineHeight.lineheight2);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.body-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.body-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.body-s.desktop);
+    }
     @apply text-left;
     word-break: break-word;
     letter-spacing: theme(digitv2.spacers.spacer0);

package/src/digitv2/components/fieldV1.scss

@@ -35,6 +35,25 @@
         .info-icon .infotext {
             @extend .typography.body-s;
             @apply absolute text-center;
+            font-family: theme(digitv2.fontFamily.sans);
+            font-style: theme(digitv2.fontStyle.normal);
+            font-weight: theme(digitv2.fontWeight.regular);
+            line-height: theme(digitv2.lineHeight.lineheight2);
+        
+            @media (max-aspect-ratio: 9/16) {
+              /* Media query for mobile */
+              font-size: theme(digitv2.fontSize.body-s.mobile);
+            }
+        
+            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+              /* Media query for tablets */
+              font-size: theme(digitv2.fontSize.body-s.tablet);
+            }
+        
+            @media (min-aspect-ratio: 3/4) {
+              /* Media query for desktop */
+              font-size: theme(digitv2.fontSize.body-s.desktop);
+            }
             visibility: hidden;
             width: 7.5rem;
             background-color: #555555;
@@ -75,6 +94,25 @@
         @apply flex justify-between items-baseline;
         color: theme(digitv2.lightTheme.text-secondary);
         gap: theme(digitv2.spacers.spacer2);
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+    
+        @media (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.body-s.mobile);
+        }
+    
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.body-s.tablet);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.body-s.desktop);
+        }
 
 
         @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {

package/src/digitv2/components/headerdropdownV2.scss

@@ -31,6 +31,25 @@
   .header-dropdown-label {
     @extend .typography.body-s;
     cursor: pointer;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.regular);
+    line-height: theme(digitv2.lineHeight.lineheight2);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.body-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.body-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.body-s.desktop);
+    }
     display: flex;
     align-items: center;
     color: theme(digitv2.lightTheme.text-primary);
@@ -96,6 +115,25 @@
   .header-dropdown-option {
     @extend .typography.body-s;
     @apply whitespace-no-wrap w-full max-w-full overflow-hidden;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.regular);
+    line-height: theme(digitv2.lineHeight.lineheight2);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.body-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.body-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.body-s.desktop);
+    }
     padding: theme(digitv2.spacers.spacer4) 0.625rem;
     color: theme(digitv2.lightTheme.text-primary);
     gap: theme(digitv2.spacers.spacer2);
@@ -117,6 +155,25 @@
   
   .header-dropdown-nooption {
     @extend .typography.body-s;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.regular);
+    line-height: theme(digitv2.lineHeight.lineheight2);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.body-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.body-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.body-s.desktop);
+    }
     padding: theme(digitv2.spacers.spacer2);
     pointer-events: none;
     color: theme(digitv2.lightTheme.text-disabled);

package/src/digitv2/components/mobilesidebarV2.scss

@@ -228,6 +228,25 @@
   ::placeholder {
     content: attr(placeholder);
     @extend .typography.body-s;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.regular);
+    line-height: theme(digitv2.lineHeight.lineheight2);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.body-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.body-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.body-s.desktop);
+    }
     color: theme(digitv2.lightTheme.text-disabled);
   }
 }
@@ -274,6 +293,25 @@
   ::placeholder {
     content: attr(placeholder);
     @extend .typography.body-s;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.regular);
+    line-height: theme(digitv2.lineHeight.lineheight2);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.body-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.body-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.body-s.desktop);
+    }
     color: theme(digitv2.lightTheme.generic-background);
   }
 }

package/src/digitv2/components/multiSelectDropdownV2.scss

@@ -92,6 +92,25 @@
     align-items: center;
     .category-selectAll-label {
       @extend .typography.body-s;
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.regular);
+      line-height: theme(digitv2.lineHeight.lineheight2);
+  
+      @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.body-s.mobile);
+      }
+  
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.body-s.tablet);
+      }
+  
+      @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.body-s.desktop);
+      }
       text-align: left;
       color: theme(digitv2.lightTheme.primary-1);
     }
@@ -181,6 +200,25 @@
     p {
       @extend .typography.body-s;
       @apply w-full overflow-hidden whitespace-no-wrap max-w-full;
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.regular);
+      line-height: theme(digitv2.lineHeight.lineheight2);
+  
+      @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.body-s.mobile);
+      }
+  
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.body-s.tablet);
+      }
+  
+      @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.body-s.desktop);
+      }
       color: theme(digitv2.lightTheme.text-primary);
       margin: theme(digitv2.spacers.spacer0);
       text-overflow: ellipsis;

package/src/digitv2/components/panelCardV2.scss

@@ -84,6 +84,25 @@
 
         .digit-panelcard-description {
             @extend .typography.body-s;
+            font-family: theme(digitv2.fontFamily.sans);
+            font-style: theme(digitv2.fontStyle.normal);
+            font-weight: theme(digitv2.fontWeight.regular);
+            line-height: theme(digitv2.lineHeight.lineheight2);
+        
+            @media (max-aspect-ratio: 9/16) {
+              /* Media query for mobile */
+              font-size: theme(digitv2.fontSize.body-s.mobile);
+            }
+        
+            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+              /* Media query for tablets */
+              font-size: theme(digitv2.fontSize.body-s.tablet);
+            }
+        
+            @media (min-aspect-ratio: 3/4) {
+              /* Media query for desktop */
+              font-size: theme(digitv2.fontSize.body-s.desktop);
+            }
             color: theme(digitv2.lightTheme.generic-inputborder);
         }
 

package/src/digitv2/components/popUpV2.scss

@@ -141,6 +141,25 @@
   
     .digit-popup-children-wrap {
       @extend .typography.body-s;
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.regular);
+      line-height: theme(digitv2.lineHeight.lineheight2);
+  
+      @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.body-s.mobile);
+      }
+  
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.body-s.tablet);
+      }
+  
+      @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.body-s.desktop);
+      }
       @apply overflow-hidden overflow-y-auto flex-col;
       display: flex;
       flex: 1;
@@ -148,6 +167,25 @@
 
       .digit-popup-description {
         @extend .typography.body-s;
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+    
+        @media (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.body-s.mobile);
+        }
+    
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.body-s.tablet);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.body-s.desktop);
+        }
         color: theme(digitv2.lightTheme.text-primary);
       }
   

package/src/digitv2/components/radiobtnV2.scss

@@ -76,6 +76,25 @@
 
   label {
     @extend .typography.body-s;
+    font-family: theme(digitv2.fontFamily.sans);
+    font-style: theme(digitv2.fontStyle.normal);
+    font-weight: theme(digitv2.fontWeight.regular);
+    line-height: theme(digitv2.lineHeight.lineheight2);
+
+    @media (max-aspect-ratio: 9/16) {
+      /* Media query for mobile */
+      font-size: theme(digitv2.fontSize.body-s.mobile);
+    }
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      /* Media query for tablets */
+      font-size: theme(digitv2.fontSize.body-s.tablet);
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      /* Media query for desktop */
+      font-size: theme(digitv2.fontSize.body-s.desktop);
+    }
     color: theme(digitv2.lightTheme.text-primary);
     overflow-wrap: anywhere;
   }

package/src/digitv2/components/selectDropdownV2.scss

@@ -154,6 +154,25 @@
     }
     .main-option {
       @extend .typography.body-s;
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.regular);
+      line-height: theme(digitv2.lineHeight.lineheight2);
+  
+      @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.body-s.mobile);
+      }
+  
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.body-s.tablet);
+      }
+  
+      @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.body-s.desktop);
+      }
       @apply whitespace-no-wrap w-full max-w-full overflow-hidden;
       text-overflow: ellipsis;
       &.nestedtextdropdown,
@@ -251,6 +270,25 @@
     pointer-events: none;
     span {
       @extend .typography.body-s;
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.regular);
+      line-height: theme(digitv2.lineHeight.lineheight2);
+  
+      @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.body-s.mobile);
+      }
+  
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.body-s.tablet);
+      }
+  
+      @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.body-s.desktop);
+      }
       color: theme(digitv2.lightTheme.text-disabled);
     }
   }

package/src/digitv2/components/sidebarV2.scss

@@ -61,6 +61,25 @@
         ::placeholder {
             content: attr(placeholder);
             @extend .typography.body-s;
+            font-family: theme(digitv2.fontFamily.sans);
+            font-style: theme(digitv2.fontStyle.normal);
+            font-weight: theme(digitv2.fontWeight.regular);
+            line-height: theme(digitv2.lineHeight.lineheight2);
+        
+            @media (max-aspect-ratio: 9/16) {
+              /* Media query for mobile */
+              font-size: theme(digitv2.fontSize.body-s.mobile);
+            }
+        
+            @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+              /* Media query for tablets */
+              font-size: theme(digitv2.fontSize.body-s.tablet);
+            }
+        
+            @media (min-aspect-ratio: 3/4) {
+              /* Media query for desktop */
+              font-size: theme(digitv2.fontSize.body-s.desktop);
+            }
             color: theme(digitv2.lightTheme.generic-background);
         }
     }

package/src/digitv2/components/stepperV2.scss

@@ -24,6 +24,25 @@
 
     .stepper-label {
       @extend .typography.body-s;
+      font-family: theme(digitv2.fontFamily.sans);
+      font-style: theme(digitv2.fontStyle.normal);
+      font-weight: theme(digitv2.fontWeight.regular);
+      line-height: theme(digitv2.lineHeight.lineheight2);
+  
+      @media (max-aspect-ratio: 9/16) {
+        /* Media query for mobile */
+        font-size: theme(digitv2.fontSize.body-s.mobile);
+      }
+  
+      @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+        /* Media query for tablets */
+        font-size: theme(digitv2.fontSize.body-s.tablet);
+      }
+  
+      @media (min-aspect-ratio: 3/4) {
+        /* Media query for desktop */
+        font-size: theme(digitv2.fontSize.body-s.desktop);
+      }
       @apply text-center;
       color: theme(digitv2.lightTheme.text-secondary);
       letter-spacing: theme(digitv2.spacers.spacer0);

package/src/digitv2/components/switchV2.scss

@@ -70,7 +70,7 @@
   @apply text-left;
   word-break: break-word;
   letter-spacing: theme(digitv2.spacers.spacer0);
-  color: theme(digitv2.lightTheme.text-secondary);
+  color: theme(digitv2.lightTheme.text-primary);
 
   &.labelFirst{
     margin:theme(digitv2.spacers.spacer0);

package/src/digitv2/components/textblockV2.scss

@@ -42,6 +42,25 @@
 
     .digit-text-block-body {
         @extend .typography.body-s;
+        font-family: theme(digitv2.fontFamily.sans);
+        font-style: theme(digitv2.fontStyle.normal);
+        font-weight: theme(digitv2.fontWeight.regular);
+        line-height: theme(digitv2.lineHeight.lineheight2);
+    
+        @media (max-aspect-ratio: 9/16) {
+          /* Media query for mobile */
+          font-size: theme(digitv2.fontSize.body-s.mobile);
+        }
+    
+        @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+          /* Media query for tablets */
+          font-size: theme(digitv2.fontSize.body-s.tablet);
+        }
+    
+        @media (min-aspect-ratio: 3/4) {
+          /* Media query for desktop */
+          font-size: theme(digitv2.fontSize.body-s.desktop);
+        }
         color: theme(digitv2.lightTheme.generic-inputborder);
     }
 }