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

package/src/digitv2/components/cardV2.scss

@@ -1,4 +1,5 @@
-@import url("../index.scss");
+@import './theme-variables.css';
+@import '../typography.scss';
 
 .digit-card {
     @apply bg-white m-sm px-md pt-md pb-lg shadow-card;
@@ -178,7 +179,7 @@
 .submit-bar {
     @extend .light-primary-button;
     @apply h-10 text-center w-full outline-none;
-    box-shadow: inset 0px -2px 0px theme(colors.text.primary);
+    box-shadow: inset 0px -2px 0px theme("colors.text.primary");
     cursor: pointer;
 
     &:focus {
@@ -334,7 +335,8 @@
 }
 
 .digit-card-section-header {
-    @apply text-text-primary text-heading-m font-bold;
+    @apply text-heading-m font-bold;
+    color: theme("digitv2.lightTheme.text-primary");
 }
 
 .digit-card-search-heading {
@@ -388,16 +390,16 @@
 
     width: 100%;
     height: auto;
-    background-color: theme(digitv2.lightTheme.paper-primary);
-    border-radius: theme(digitv2.spacers.spacer1);
+    background-color: theme("digitv2.lightTheme.paper-primary");
+    border-radius: theme("digitv2.spacers.spacer1");
     box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
     display: flex;
-    gap: theme(digitv2.spacers.spacer4);
+    gap: theme("digitv2.spacers.spacer4");
     flex-direction: column;
 
     &.secondary {
-        background-color: theme(digitv2.lightTheme.paper-secondary);
-        border: 0.063em solid theme(digitv2.lightTheme.generic-divider);
+        background-color: theme("digitv2.lightTheme.paper-secondary");
+        border: 0.063em solid theme("digitv2.lightTheme.generic-divider");
     }
 
     &.secondary.search,
@@ -459,20 +461,20 @@
     }
 
     @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
-        padding: theme(digitv2.spacers.spacer5);
+        padding: theme("digitv2.spacers.spacer5");
     }
 
     @media (min-aspect-ratio: 3/4) {
-        padding: theme(digitv2.spacers.spacer6);
+        padding: theme("digitv2.spacers.spacer6");
     }
 
     @media (max-aspect-ratio: 9/16) {
-        padding: theme(digitv2.spacers.spacer4);
+        padding: theme("digitv2.spacers.spacer4");
     }
 
     &.action {
-        padding: theme(digitv2.spacers.spacer6);
-        gap: theme(digitv2.spacers.spacer6);
+        padding: theme("digitv2.spacers.spacer6");
+        gap: theme("digitv2.spacers.spacer6");
 
         button {
             width: 100%;
@@ -482,7 +484,7 @@
     &.summarycard{
 
         .digit-text-block-wrap .digit-text-block-header-content .digit-text-block-subheader{
-            color: theme(digitv2.lightTheme.primary-2);
+            color: theme("digitv2.lightTheme.primary-2");
         }
     }
 
@@ -495,4 +497,9 @@
             margin-bottom: unset;
         }
     }
+}
+.titleStyle{
+    color: theme("digitv2.lightTheme.primary-2");
+    font-weight: theme("digitv2.fontWeight.bold");
+    font-size: theme("digitv2.spacers.spacer10");
 }

package/src/digitv2/components/cardbasedoptionsV2.scss

@@ -1,3 +1,6 @@
+@import './theme-variables.css';
+@import '../typography.scss';
+
 .digit-card-based-options {
     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
     @apply bg-white mb-md px-sm py-md mx-sm rounded w-full;
@@ -25,7 +28,7 @@
           svg {
             height: 20px;
             width: 20px;
-            fill: theme(colors.primary.main);
+            fill: theme("colors.primary.main");
             margin: auto;
           }
         }

package/src/digitv2/components/cardlabelV2.scss

@@ -1,8 +1,9 @@
-@import url("../typography.scss");
+@import './theme-variables.css';
+@import '../typography.scss';
 
 .digit-card-label {
-  font-weight: theme(digitv2.fontWeight.regular);
+  font-weight: theme("digitv2.fontWeight.regular");
   font-size: 16px;
   line-height: 19px;
-  color: theme(digitv2.lightTheme.text-primary);
+  color: theme("digitv2.lightTheme.text-primary");
 }

package/src/digitv2/components/checkboxV2.scss

@@ -1,14 +1,15 @@
-@import url("../index.scss");
+@import './theme-variables.css';
+@import '../typography.scss';
 
 .digit-checkbox-container {
   @apply flex mb-md relative;
-  gap: theme(digitv2.spacers.spacer4);
+  gap: theme("digitv2.spacers.spacer4");
 
   input {
     @apply opacity-0 absolute cursor-pointer z-10;
     @extend .light-input-border;
-    width: theme(digitv2.spacers.spacer8);
-    height: theme(digitv2.spacers.spacer8);
+    width: theme("digitv2.spacers.spacer8");
+    height: theme("digitv2.spacers.spacer8");
     left: -15%;
   }
 
@@ -18,8 +19,8 @@
 
   .digit-custom-checkbox {
     @apply flex items-center border border-solid border-text-secondary justify-center;
-    width: theme(digitv2.spacers.spacer6);
-    height: theme(digitv2.spacers.spacer6);
+    width: theme("digitv2.spacers.spacer6");
+    height: theme("digitv2.spacers.spacer6");
 
     img,
     svg {
@@ -32,11 +33,11 @@
 
     &:hover {
       @apply border-2;
-      border-color: theme(digitv2.lightTheme.primary-1);
+      border-color: theme("digitv2.lightTheme.primary-1");
     }
 
     &.intermediate {
-      border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
+      border: 0.125rem solid theme("digitv2.lightTheme.primary-1");
     }
   }
 
@@ -46,15 +47,15 @@
 
   input:hover~.digit-custom-checkbox {
     @apply border-2;
-    border-color: theme(digitv2.lightTheme.primary-1);
+    border-color: theme("digitv2.lightTheme.primary-1");
   }
 
   input:hover~.digit-custom-checkbox.intermediate{
-    border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
+    border: 0.125rem solid theme("digitv2.lightTheme.primary-1");
   }
 
   input:checked~.digit-custom-checkbox {
-    border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
+    border: 0.125rem solid theme("digitv2.lightTheme.primary-1");
   }
 
 
@@ -64,64 +65,64 @@
 
   input:checked~.digit-custom-checkbox svg {
     @apply opacity-100;
-    width: theme(digitv2.spacers.spacer4);
-    height: theme(digitv2.spacers.spacer4);
+    width: theme("digitv2.spacers.spacer4");
+    height: theme("digitv2.spacers.spacer4");
   }
 
   .intermediate-square {
-    width: theme(digitv2.spacers.spacer4);
-    height: theme(digitv2.spacers.spacer4);
-    background-color: theme(digitv2.lightTheme.primary-1);
+    width: theme("digitv2.spacers.spacer4");
+    height: theme("digitv2.spacers.spacer4");
+    background-color: theme("digitv2.lightTheme.primary-1");
     display: block;
   }
 
   .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);
+    @include 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);
+      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);
+      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);
+      font-size: theme("digitv2.fontSize.body-s.desktop");
     }
 
     @apply text-left;
     word-break: break-word;
-    letter-spacing: theme(digitv2.spacers.spacer0);
-    color: theme(digitv2.lightTheme.text-primary) !important;
+    letter-spacing: theme("digitv2.spacers.spacer0");
+    color: theme("digitv2.lightTheme.text-primary") !important;
     display: flex;
     align-items: center;
   }
 
   &.disabled {
     .digit-custom-checkbox {
-      border: 0.063rem solid theme(digitv2.lightTheme.text-disabled);
+      border: 0.063rem solid theme("digitv2.lightTheme.text-disabled");
     }
 
     input:checked~.digit-custom-checkbox {
-      border: 0.125rem solid theme(digitv2.lightTheme.text-disabled);
+      border: 0.125rem solid theme("digitv2.lightTheme.text-disabled");
     }
 
     .digit-custom-checkbox.intermediate{
-      border: 0.125rem solid theme(digitv2.lightTheme.text-disabled);
+      border: 0.125rem solid theme("digitv2.lightTheme.text-disabled");
     }
 
     .intermediate-square {
-      width: theme(digitv2.spacers.spacer4);
-      height: theme(digitv2.spacers.spacer4);
-      background-color: theme(digitv2.lightTheme.text-disabled);
+      width: theme("digitv2.spacers.spacer4");
+      height: theme("digitv2.spacers.spacer4");
+      background-color: theme("digitv2.lightTheme.text-disabled");
       display: block;
     }
   }

package/src/digitv2/components/chipV2.scss

@@ -1,12 +1,15 @@
+@import './theme-variables.css';
+@import '../typography.scss';
+
 .digit-tag-error-container {
   @apply flex flex-col max-w-full;
-  gap: theme(digitv2.spacers.spacer1);
+  gap: theme("digitv2.spacers.spacer1");
 }
 
 .digit-tag-container {
   @apply flex flex-wrap mb-md items-center;
-  gap: theme(digitv2.spacers.spacer2);
-  margin-top: theme(digitv2.spacers.spacer2);
+  gap: theme("digitv2.spacers.spacer2");
+  margin-top: theme("digitv2.spacers.spacer2");
 
   @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
     /* Media query for tablets */
@@ -28,21 +31,21 @@
 
   .digit-tag {
     @apply inline-flex items-center h-10 w-full max-w-full;
-    padding: theme(digitv2.spacers.spacer2);
-    gap: theme(digitv2.spacers.spacer2);
-    border-radius: theme(digitv2.spacers.spacer1);
-    background: theme(digitv2.lightTheme.generic-background);
-    margin: theme(digitv2.spacers.spacer0);
-    border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+    padding: theme("digitv2.spacers.spacer2");
+    gap: theme("digitv2.spacers.spacer2");
+    border-radius: theme("digitv2.spacers.spacer1");
+    background: theme("digitv2.lightTheme.generic-background");
+    margin: theme("digitv2.spacers.spacer0");
+    border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
 
     @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
       /* Media query for tablets */
-      height: theme(digitv2.spacers.spacer9);
+      height: theme("digitv2.spacers.spacer9");
     }
   
     @media (max-aspect-ratio: 9/16) {
       /* Media query for mobile */
-      height: theme(digitv2.spacers.spacer9);
+      height: theme("digitv2.spacers.spacer9");
     }
   
 
@@ -55,53 +58,53 @@
     }
 
     .digit-text {
-      @extend .typography.body-xs;
-      @apply overflow-hidden items-center whitespace-no-wrap;
-      font-family: theme(digitv2.fontFamily.sans);
-      font-style: theme(digitv2.fontStyle.normal);
-      font-weight: theme(digitv2.fontWeight.regular);
-      line-height: theme(digitv2.lineHeight.lineheight2);
+      @include typography-body-xs;
+      @apply overflow-hidden items-center whitespace-nowrap;
+      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-xs.mobile);
+        font-size: theme("digitv2.fontSize.body-xs.mobile");
       }
   
       @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
         /* Media query for tablets */
-        font-size: theme(digitv2.fontSize.body-xs.tablet);
+        font-size: theme("digitv2.fontSize.body-xs.tablet");
       }
   
       @media (min-aspect-ratio: 3/4) {
         /* Media query for desktop */
-        font-size: theme(digitv2.fontSize.body-xs.desktop);
+        font-size: theme("digitv2.fontSize.body-xs.desktop");
       }
-      max-width: calc(100% - (theme(digitv2.spacers.spacer7)));
-      width: calc(100% - (theme(digitv2.spacers.spacer7)));
+      max-width: calc(100% - (theme("digitv2.spacers.spacer7")));
+      width: calc(100% - (theme("digitv2.spacers.spacer7")));
       text-overflow: clip;
-      color: theme(digitv2.lightTheme.text-primary);
+      color: theme("digitv2.lightTheme.text-primary");
       display: flex;
       text-overflow: ellipsis;
     }
 
     .close-icon {
       @apply items-center w-6 h-6 cursor-pointer flex-shrink-0;
-      border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
-      border-radius: theme(digitv2.spacers.spacer1);
-      background-color: theme(digitv2.lightTheme.text-secondary);
+      border: 0.063rem solid theme("digitv2.lightTheme.text-secondary");
+      border-radius: theme("digitv2.spacers.spacer1");
+      background-color: theme("digitv2.lightTheme.text-secondary");
       display: flex !important;
       justify-content: center;
 
       @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
         /* Media query for tablets */
-        height: theme(digitv2.spacers.spacer5);
-        width: theme(digitv2.spacers.spacer5);
+        height: theme("digitv2.spacers.spacer5");
+        width: theme("digitv2.spacers.spacer5");
       }
     
       @media (max-aspect-ratio: 9/16) {
         /* Media query for mobile */
-        height: theme(digitv2.spacers.spacer5);
-        width: theme(digitv2.spacers.spacer5);
+        height: theme("digitv2.spacers.spacer5");
+        width: theme("digitv2.spacers.spacer5");
       }
 
       &.disabled{
@@ -110,38 +113,38 @@
 
       svg{
         @apply items-center flex-shrink-0;
-        width: theme(digitv2.spacers.spacer6);
-        height: theme(digitv2.spacers.spacer6);
+        width: theme("digitv2.spacers.spacer6");
+        height: theme("digitv2.spacers.spacer6");
         display: flex !important;
         justify-content: center;
 
         @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
           /* Media query for tablets */
-          height: theme(digitv2.spacers.spacer5);
-          width: theme(digitv2.spacers.spacer5);
+          height: theme("digitv2.spacers.spacer5");
+          width: theme("digitv2.spacers.spacer5");
         }
       
         @media (max-aspect-ratio: 9/16) {
           /* Media query for mobile */
-          height: theme(digitv2.spacers.spacer5);
-          width: theme(digitv2.spacers.spacer5);
+          height: theme("digitv2.spacers.spacer5");
+          width: theme("digitv2.spacers.spacer5");
         }
       }
     }
 
     &.errortag {
-      border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
-      background-color: theme(digitv2.lightTheme.paper-primary);
-      box-shadow: 0.125rem 0.125rem theme(digitv2.spacers.spacer1) theme(digitv2.spacers.spacer0) #D4351C4D;
+      border: 0.063rem solid theme("digitv2.lightTheme.alert-error");
+      background-color: theme("digitv2.lightTheme.paper-primary");
+      box-shadow: 0.125rem 0.125rem theme("digitv2.spacers.spacer1") theme("digitv2.spacers.spacer0") #D4351C4D;
 
       .digit-text {
-        @extend .typography.heading-xs;
-        color: theme(digitv2.lightTheme.alert-error);
+        @include typography-heading-xs;
+        color: theme("digitv2.lightTheme.alert-error");
       }
 
       .close-icon {
-        border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
-        background-color: theme(digitv2.lightTheme.alert-error);
+        border: 0.063rem solid theme("digitv2.lightTheme.alert-error");
+        background-color: theme("digitv2.lightTheme.alert-error");
       }
     }
   }

package/src/digitv2/components/dividerV2.scss

@@ -1,13 +1,16 @@
+@import './theme-variables.css';
+@import '../typography.scss';
+
 .digit-divider {
-    border: theme(digitv2.divider.dividerS);
+    border: theme("digitv2.divider.dividerS");
     width: 100%;
-    margin: theme(digitv2.spacers.spacer0);
+    margin: theme("digitv2.spacers.spacer0");
 
     &.medium {
-        border: theme(digitv2.divider.dividerM);
+        border: theme("digitv2.divider.dividerM");
     }
 
     &.large {
-        border: theme(digitv2.divider.dividerL);
+        border: theme("digitv2.divider.dividerL");
     }
 }

package/src/digitv2/components/errorMessageV2.scss

@@ -1,42 +1,42 @@
-@import url("../index.scss");
-@import url("../typography.scss");
+@import './theme-variables.css';
+@import '../typography.scss';
 
 .digit-error-icon-message-wrap {
   @apply flex w-full whitespace-pre-wrap break-words;
-  gap: theme(digitv2.spacers.spacer1);
+  gap: theme("digitv2.spacers.spacer1");
   word-break: break-word;
   cursor: default;
 
   .digit-error-icon {
     @apply flex items-center;
-    width: theme(digitv2.spacers.spacer4);
-    height: theme(digitv2.lineHeight.lineheight2);
+    width: theme("digitv2.spacers.spacer4");
+    height: theme("digitv2.lineHeight.lineheight2");
   }
 
   .digit-error-message {
-    @extend .typography.body-s;
+    @include typography-body-s;
     @apply 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);
+    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);
+      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);
+      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);
+      font-size: theme("digitv2.fontSize.body-s.desktop");
     }
 
-    margin: theme(digitv2.spacers.spacer0);
-    color: theme(digitv2.lightTheme.alert-error)
+    margin: theme("digitv2.spacers.spacer0");
+    color: theme("digitv2.lightTheme.alert-error")
   }
 }