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

package/src/digitv2/components/timelineV2.scss

@@ -73,6 +73,25 @@
 
 .timeline-date {
   @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;
   color: theme(digitv2.lightTheme.text-secondary);
 }

package/src/digitv2/components/toastV2.scss

@@ -1,4 +1,4 @@
-.digit-toast-success {
+/*.digit-toast-success {
   @apply fixed flex z-20 w-full max-w-full left-0 items-center;
   bottom: -(theme(digitv2.spacers.spacer12));
   gap: theme(digitv2.spacers.spacer2);
@@ -76,6 +76,84 @@
   }
 }
 
+.digit-toast-success.animate {
+  animation: slideInFromBottom 0.5s ease forwards;
+}*/
+
+.digit-toast-success {
+  max-width: 100%;
+  width: auto;
+  gap: theme(digitv2.spacers.spacer2);
+  height: theme(digitv2.spacers.spacer12);
+  padding: theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3) theme(digitv2.spacers.spacer3) !important;
+  @apply fixed flex z-20 items-center;
+  background-color: theme(digitv2.lightTheme.alert-success);
+  transition: bottom 0.5s ease;
+  left: 0;
+
+  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+    min-width: 30rem;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    @apply w-full min-w-full;
+  }
+
+  @media (min-aspect-ratio: 3/4){
+    min-width: 50rem;
+  }
+
+  &.digit-info {
+    background-color: theme(digitv2.lightTheme.alert-info);
+  }
+
+  &.digit-error {
+    background-color: theme(digitv2.lightTheme.alert-error);
+  }
+
+  &.digit-warning {
+    background-color: theme(digitv2.lightTheme.alert-warning);
+
+    &.digit-warning-buttons {
+      @apply block;
+    }
+  }
+
+  .digit-warning-button-container {
+    @apply w-full flex justify-end;
+
+    button {
+      margin-left: 0.625rem;
+    }
+  }
+
+  .digit-toast-sub-container {
+    @apply flex;
+  }
+
+  svg {
+    @apply flex-shrink-0;
+  }
+
+  .toast-label {
+    @extend .typography.caption-s;
+    @apply text-left overflow-hidden whitespace-no-wrap flex-grow flex items-center h-6;
+    letter-spacing: theme(digitv2.spacers.spacer0);
+    color: theme(digitv2.lightTheme.paper-primary);
+    margin: theme(digitv2.spacers.spacer0);
+    text-overflow: ellipsis;
+  }
+}
+
+@keyframes slideInFromBottom {
+  from {
+    bottom: -100%;
+  }
+  to {
+    bottom: 4rem;
+  }
+}
+
 .digit-toast-success.animate {
   animation: slideInFromBottom 0.5s ease forwards;
 }

package/src/digitv2/components/topbarV2.scss

@@ -376,6 +376,25 @@
       .digit-topbar-ulb-mobileview {
         @apply overflow-hidden whitespace-no-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);
+        }
         text-overflow: ellipsis;
         color: theme(digitv2.lightTheme.text-primary);
   

package/src/digitv2/components/treeSelectV2.scss

@@ -125,6 +125,25 @@
 }
 .digit-option-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 overflow-hidden w-full;
     flex: 1;
     color: theme(digitv2.lightTheme.text-primary);}

package/src/digitv2/components/uploaderV2.scss

@@ -131,6 +131,25 @@
 
     .drag-drop-text {
       @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 items-center;
       color: theme(digitv2.lightTheme.text-disabled);
       display: flex;
@@ -149,6 +168,25 @@
 
   .digit-uploadpopup-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-disabled);
   }
 
@@ -158,6 +196,25 @@
 
   .digit-uploader-input {
     @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 h-10;
     background-color: transparent;
     border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
@@ -318,6 +375,25 @@
 
   .digit-upload-helptext {
     @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;
     margin: theme(digitv2.spacers.spacer0);
     color: theme(digitv2.lightTheme.text-secondary);

package/src/digitv2/components/viewCardFieldPairV2.scss

@@ -14,6 +14,25 @@
 
     .digit-viewcard-value{
         @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-pre-wrap break-words w-full;
         color: theme(digitv2.lightTheme.text-primary);
     }