@egovernments/digit-ui-components-css 2.0.0-dev-10 → 2.0.0-dev-12

package/src/digitv2/components/headerV2.scss

@@ -197,9 +197,9 @@ video::-webkit-media-controls-panel {
   left: 0;
   z-index: 9999999;
   display: flex;
-  background-color: theme("digitv2.lightTheme.paper-primary");
+  background-color: var(--digitv2-lightTheme-paper-primary);
   height: 4.5rem;
-  padding: theme("digitv2.spacers.spacer4") theme("digitv2.spacers.spacer10") theme("digitv2.spacers.spacer4") theme("digitv2.spacers.spacer10");
+  padding: var(--digitv2-spacers-spacer4) var(--digitv2-spacers-spacer10) var(--digitv2-spacers-spacer4) var(--digitv2-spacers-spacer10);
 
   .margin-top-10 {
     margin-top: 0.625rem;
@@ -224,7 +224,7 @@ video::-webkit-media-controls-panel {
   .digit-dropdown-item {
     display: flex;
     flex-direction: row;
-    padding: theme("digitv2.spacers.spacer3");
+    padding: var(--digitv2-spacers-spacer3);
     column-gap: 0.625rem;
     color: theme("colors.text.secondary");
 
@@ -238,39 +238,39 @@ video::-webkit-media-controls-panel {
   }
 
   @media (min-width: 30.063rem) and (max-width: 47.938rem) {
-    padding: theme("digitv2.spacers.spacer4") theme("digitv2.spacers.spacer6") theme("digitv2.spacers.spacer4") theme("digitv2.spacers.spacer6");
-    gap: theme("digitv2.spacers.spacer4");
+    padding: var(--digitv2-spacers-spacer4) var(--digitv2-spacers-spacer6) var(--digitv2-spacers-spacer4) var(--digitv2-spacers-spacer6);
+    gap: var(--digitv2-spacers-spacer4);
   }
 
   @media (max-width: 30rem) {
     height: 3.5rem;
-    padding: theme("digitv2.spacers.spacer4");
-    gap: theme("digitv2.spacers.spacer4");
+    padding: var(--digitv2-spacers-spacer4);
+    gap: var(--digitv2-spacers-spacer4);
   }
 
   &.light {
-    box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.125rem theme("digitv2.spacers.spacer0") #00000029;
+    box-shadow: var(--digitv2-spacers-spacer0) 0.063rem 0.125rem var(--digitv2-spacers-spacer0) #00000029;
   }
 
   .digit-logo-ulb-wrapper {
     display: flex !important;
-    gap: theme("digitv2.spacers.spacer4");
+    gap: var(--digitv2-spacers-spacer4);
     align-items: center !important;
-    max-width: calc(50% - (theme("digitv2.spacers.spacer6")));
+    max-width: calc(50% - (var(--digitv2-spacers-spacer6)));
 
     @media (min-width: 48rem) {
-      height: theme("digitv2.spacers.spacer8");
+      height: var(--digitv2-spacers-spacer8);
     }
 
     @media (min-width: 30.063rem) and (max-width: 47.938rem) {
-      height: theme("digitv2.spacers.spacer8");
+      height: var(--digitv2-spacers-spacer8);
     }
 
     @media (max-width: 30rem) {}
 
     .digit-topbar-logo {
       flex-shrink: 0;
-      height: theme("digitv2.spacers.spacer8");
+      height: var(--digitv2-spacers-spacer8);
       width: 1.291rem;
 
       &.clickable {
@@ -280,43 +280,43 @@ video::-webkit-media-controls-panel {
 
     .digit-topbar-ulb {
       @include typography-heading-s;
-      font-family: theme("digitv2.fontFamily.sans");
-      font-style: theme("digitv2.fontStyle.normal");
-      font-weight: theme("digitv2.fontWeight.bold");
-      line-height: theme("digitv2.lineHeight.lineheight1");
+      font-family: var(--digitv2-fontFamily-sans);
+      font-style: var(--digitv2-fontStyle-normal);
+      font-weight: var(--digitv2-fontWeight-bold);
+      line-height: var(--digitv2-lineHeight-lineheight1);
   
       @media (max-aspect-ratio: 9/16) {
         /* Media query for mobile */
-        font-size: theme("digitv2.fontSize.heading-s.mobile");
+        font-size: var(--digitv2-fontSize-heading-s-mobile);
       }
   
       @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
         /* Media query for tablets */
-        font-size: theme("digitv2.fontSize.heading-s.tablet");
+        font-size: var(--digitv2-fontSize-heading-s-tablet);
       }
   
       @media (min-aspect-ratio: 3/4) {
         /* Media query for desktop */
-        font-size: theme("digitv2.fontSize.heading-s.desktop");
+        font-size: var(--digitv2-fontSize-heading-s-desktop);
       }
       @apply whitespace-nowrap overflow-hidden;
-      color: theme("digitv2.lightTheme.text-primary");
+      color: var(--digitv2-lightTheme-text-primary);
       text-overflow: ellipsis;
     }
   }
 
   &.dark {
-    background-color: theme("digitv2.lightTheme.primary-2");
+    background-color: var(--digitv2-lightTheme-primary-2);
 
     .digit-logo-ulb-wrapper {
       .digit-topbar-ulb {
-        color: theme("digitv2.lightTheme.paper-primary");
+        color: var(--digitv2-lightTheme-paper-primary);
       }
     }
 
     .digit-header-action-fields {
       .individual-action-field {
-        color: theme("digitv2.lightTheme.paper-primary");
+        color: var(--digitv2-lightTheme-paper-primary);
 
         .digit-dropdown-employee-select-wrap,
         .digit-dropdown-select-wrap{
@@ -329,16 +329,16 @@ video::-webkit-media-controls-panel {
   .digit-header-action-fields {
     @apply items-center overflow-hidden;
     display: flex !important;
-    height: theme("digitv2.spacers.spacer8");
+    height: var(--digitv2-spacers-spacer8);
     max-width: 50%;
 
 
     @media (min-width: 48rem) {
-      gap: theme("digitv2.spacers.spacer8");
+      gap: var(--digitv2-spacers-spacer8);
     }
 
     @media (min-width: 30.063rem) and (max-width: 47.938rem) {
-      gap: theme("digitv2.spacers.spacer4");
+      gap: var(--digitv2-spacers-spacer4);
     }
 
     .digit-header-img {
@@ -349,16 +349,16 @@ video::-webkit-media-controls-panel {
   }
 
   .digit-topbar-hamburger {
-    width: theme("digitv2.spacers.spacer6");
-    height: theme("digitv2.spacers.spacer6");
+    width: var(--digitv2-spacers-spacer6);
+    height: var(--digitv2-spacers-spacer6);
 
     @media (min-width: 30.063rem) and (max-width: 47.938rem) {
-      width: theme("digitv2.spacers.spacer8");
-      height: theme("digitv2.spacers.spacer8");
+      width: var(--digitv2-spacers-spacer8);
+      height: var(--digitv2-spacers-spacer8);
 
       svg {
-        width: theme("digitv2.spacers.spacer8");
-        height: theme("digitv2.spacers.spacer8");
+        width: var(--digitv2-spacers-spacer8);
+        height: var(--digitv2-spacers-spacer8);
       }
     }
 
@@ -371,11 +371,11 @@ video::-webkit-media-controls-panel {
   .digit-header-img-ulb-wrapper-mobileview {
     display: flex;
     align-items: center;
-    height: theme("digitv2.spacers.spacer6");
-    max-width: calc(100% - (theme("digitv2.spacers.spacer6")));
+    height: var(--digitv2-spacers-spacer6);
+    max-width: calc(100% - (var(--digitv2-spacers-spacer6)));
 
     .digit-header-img {
-      margin-right: theme("digitv2.spacers.spacer2");
+      margin-right: var(--digitv2-spacers-spacer2);
       margin-bottom: 0.156rem;
 
       &.clickable {
@@ -384,13 +384,13 @@ video::-webkit-media-controls-panel {
     }
 
     .topbar-divider {
-      height: theme("digitv2.spacers.spacer6");
+      height: var(--digitv2-spacers-spacer6);
       width: 0.063rem;
-      border: 0.063rem solid theme("digitv2.lightTheme.text-primary");
+      border: 0.063rem solid var(--digitv2-lightTheme-text-primary);
       margin-right: 0.625rem;
 
       &.dark {
-        border: 0.063rem solid theme("digitv2.lightTheme.paper-primary");
+        border: 0.063rem solid var(--digitv2-lightTheme-paper-primary);
       }
 
     }
@@ -398,30 +398,30 @@ video::-webkit-media-controls-panel {
     .digit-topbar-ulb-mobileview {
       @apply overflow-hidden whitespace-nowrap;
       @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");
+      font-family: var(--digitv2-fontFamily-sans);
+      font-style: var(--digitv2-fontStyle-normal);
+      font-weight: var(--digitv2-fontWeight-regular);
+      line-height: var(--digitv2-lineHeight-lineheight2);
   
       @media (max-aspect-ratio: 9/16) {
         /* Media query for mobile */
-        font-size: theme("digitv2.fontSize.body-s.mobile");
+        font-size: var( --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: var( --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: var( --digitv2-fontSize-body-s-desktop);
       }
       text-overflow: ellipsis;
-      color: theme("digitv2.lightTheme.text-primary");
+      color: var(--digitv2-lightTheme-text-primary);
 
       &.dark {
-        color: theme("digitv2.lightTheme.paper-primary");
+        color: var(--digitv2-lightTheme-paper-primary);
       }
     }
 

package/src/digitv2/components/headerdropdownV2.scss

@@ -5,22 +5,22 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: theme("digitv2.spacers.spacer8");
-    height: theme("digitv2.spacers.spacer8");
+    width: var(--digitv2-spacers-spacer8);
+    height: var(--digitv2-spacers-spacer8);
     overflow: hidden;
     border-radius: 50%;
   
     &.text {
-      color: theme("digitv2.lightTheme.paper-primary");
+      color: var(--digitv2-lightTheme-paper-primary);
       font-weight: 700;
-      background: theme("digitv2.lightTheme.primary-2");
+      background: var(--digitv2-lightTheme-primary-2);
     }
   
     &.dark {
       &.text {
-        background: theme("digitv2.lightTheme.paper-primary");
+        background: var(--digitv2-lightTheme-paper-primary);
         font-weight: 700;
-        color: theme("digitv2.lightTheme.primary-2");
+        color: var(--digitv2-lightTheme-primary-2);
       }
     }
   
@@ -34,54 +34,54 @@
   .header-dropdown-label {
     @include 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");
+    font-family: var(--digitv2-fontFamily-sans);
+    font-style: var(--digitv2-fontStyle-normal);
+    font-weight: var(--digitv2-fontWeight-regular);
+    line-height: var(--digitv2-lineHeight-lineheight2);
 
     @media (max-aspect-ratio: 9/16) {
       /* Media query for mobile */
-      font-size: theme("digitv2.fontSize.body-s.mobile");
+      font-size: var( --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: var( --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: var( --digitv2-fontSize-body-s-desktop);
     }
     display: flex;
     align-items: center;
-    color: theme("digitv2.lightTheme.text-primary");
+    color: var(--digitv2-lightTheme-text-primary);
     position: relative;
   
     &.dark {
-      color: theme("digitv2.lightTheme.paper-primary");
+      color: var(--digitv2-lightTheme-paper-primary);
     }
   }
   
   .header-dropdown-arrow {
-    margin-left: theme("digitv2.spacers.spacer2");
-    width: theme("digitv2.spacers.spacer6");
-    height: theme("digitv2.spacers.spacer6");
+    margin-left: var(--digitv2-spacers-spacer2);
+    width: var(--digitv2-spacers-spacer6);
+    height: var(--digitv2-spacers-spacer6);
   }
   
   .header-dropdown-menu {
     width: fit-content !important;
-    box-shadow: theme("digitv2.spacers.spacer0") 0.063rem 0.275rem theme("digitv2.spacers.spacer0") #00000026;
+    box-shadow: var(--digitv2-spacers-spacer0) 0.063rem 0.275rem var(--digitv2-spacers-spacer0) #00000026;
     max-height: 80%;
-    background-color: theme("digitv2.lightTheme.paper-primary");
-    margin-top: theme("digitv2.spacers.spacer6");
+    background-color: var(--digitv2-lightTheme-paper-primary);
+    margin-top: var(--digitv2-spacers-spacer6);
     position: fixed;
     min-width: 14rem;
     max-width: 25rem;
     @apply z-30 overflow-y-auto overflow-x-hidden;
 
     &.underProfile{
-      margin-top: theme("digitv2.spacers.spacer5");
+      margin-top: var(--digitv2-spacers-spacer5);
     }
   }
   
@@ -90,19 +90,19 @@
     min-width: 14rem;
     max-width: 25rem;
     width: auto;
-    padding: theme("digitv2.spacers.spacer3") !important;
+    padding: var(--digitv2-spacers-spacer3) !important;
   }
   
   .header-dropdown-search {
-    height: theme("digitv2.spacers.spacer8") !important;
+    height: var(--digitv2-spacers-spacer8) !important;
     min-width: 12.5rem;
     max-width: 23.5rem;
   
     .digit-text-input-customIcon {
-      height: theme("digitv2.spacers.spacer5");
-      width: theme("digitv2.spacers.spacer5");
+      height: var(--digitv2-spacers-spacer5);
+      width: var(--digitv2-spacers-spacer5);
       top: 0.4rem;
-      right: theme("digitv2.spacers.spacer4");
+      right: var(--digitv2-spacers-spacer4);
     }
   
     .input-container {
@@ -122,29 +122,29 @@
   .header-dropdown-option {
     @include typography-body-s;
     @apply whitespace-nowrap 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");
+    font-family: var(--digitv2-fontFamily-sans);
+    font-style: var(--digitv2-fontStyle-normal);
+    font-weight: var(--digitv2-fontWeight-regular);
+    line-height: var(--digitv2-lineHeight-lineheight2);
 
     @media (max-aspect-ratio: 9/16) {
       /* Media query for mobile */
-      font-size: theme("digitv2.fontSize.body-s.mobile");
+      font-size: var( --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: var( --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: var( --digitv2-fontSize-body-s-desktop);
     }
-    padding: theme("digitv2.spacers.spacer4") 0.625rem;
-    color: theme("digitv2.lightTheme.text-primary");
-    gap: theme("digitv2.spacers.spacer2");
-    height: theme("digitv2.spacers.spacer10");
+    padding: var(--digitv2-spacers-spacer4) 0.625rem;
+    color: var(--digitv2-lightTheme-text-primary);
+    gap: var(--digitv2-spacers-spacer2);
+    height: var(--digitv2-spacers-spacer10);
     display: flex;
     align-items: center;
     word-break: break-word;
@@ -157,80 +157,80 @@
   }
   
   .header-dropdown-option:not(:hover):not(:active):nth-of-type(2n +1) {
-    background-color: theme("digitv2.lightTheme.paper-secondary");
+    background-color: var(--digitv2-lightTheme-paper-secondary);
   }
   
   .header-dropdown-nooption {
     @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");
+    font-family: var(--digitv2-fontFamily-sans);
+    font-style: var(--digitv2-fontStyle-normal);
+    font-weight: var(--digitv2-fontWeight-regular);
+    line-height: var(--digitv2-lineHeight-lineheight2);
 
     @media (max-aspect-ratio: 9/16) {
       /* Media query for mobile */
-      font-size: theme("digitv2.fontSize.body-s.mobile");
+      font-size: var( --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: var( --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: var( --digitv2-fontSize-body-s-desktop);
     }
-    padding: theme("digitv2.spacers.spacer2");
+    padding: var(--digitv2-spacers-spacer2);
     pointer-events: none;
-    color: theme("digitv2.lightTheme.text-disabled");
-    background-color: theme("digitv2.lightTheme.paper-secondary");
+    color: var(--digitv2-lightTheme-text-disabled);
+    background-color: var(--digitv2-lightTheme-paper-secondary);
   }
   
   .header-dropdown-option:hover,
   .header-dropdown-option.keyChange {
-    background: theme("digitv2.lightTheme.primary-bg") !important;
-    border: 0.031rem solid theme("digitv2.lightTheme.primary-1");
+    background: var(--digitv2-lightTheme-primary-bg) !important;
+    border: 0.031rem solid var(--digitv2-lightTheme-primary-1);
   }
   
   .header-dropdown-option:active,
   .header-dropdown-option.activeIndex {
     @include typography-heading-s;
-    background: theme("digitv2.lightTheme.primary-1") !important;
-    color: theme("digitv2.lightTheme.paper-primary");
+    background: var(--digitv2-lightTheme-primary-1) !important;
+    color: var(--digitv2-lightTheme-paper-primary);
 
-    font-family: theme("digitv2.fontFamily.sans");
-    font-style: theme("digitv2.fontStyle.normal");
-    font-weight: theme("digitv2.fontWeight.bold");
-    line-height: theme("digitv2.lineHeight.lineheight1");
+    font-family: var(--digitv2-fontFamily-sans);
+    font-style: var(--digitv2-fontStyle-normal);
+    font-weight: var(--digitv2-fontWeight-bold);
+    line-height: var(--digitv2-lineHeight-lineheight1);
 
     @media (max-aspect-ratio: 9/16) {
       /* Media query for mobile */
-      font-size: theme("digitv2.fontSize.heading-s.mobile");
+      font-size: var(--digitv2-fontSize-heading-s-mobile);
     }
 
     @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
       /* Media query for tablets */
-      font-size: theme("digitv2.fontSize.heading-s.tablet");
+      font-size: var(--digitv2-fontSize-heading-s-tablet);
     }
 
     @media (min-aspect-ratio: 3/4) {
       /* Media query for desktop */
-      font-size: theme("digitv2.fontSize.heading-s.desktop");
+      font-size: var(--digitv2-fontSize-heading-s-desktop);
     }
   }
   
   .header-dropdown-options::-webkit-scrollbar {
-    width: theme("digitv2.spacers.spacer2");
-    background-color: theme("digitv2.lightTheme.generic-background");
+    width: var(--digitv2-spacers-spacer2);
+    background-color: var(--digitv2-lightTheme-generic-background);
   }
   
   .header-dropdown-options::-webkit-scrollbar-track {
-    background-color: theme("digitv2.lightTheme.generic-background");
+    background-color: var(--digitv2-lightTheme-generic-background);
     border-radius: 0.563rem;
   }
   
   .header-dropdown-options::-webkit-scrollbar-thumb {
-    background-color: theme("digitv2.lightTheme.generic-divider");
+    background-color: var(--digitv2-lightTheme-generic-divider);
     border-radius: 0.563rem;
   }

package/src/digitv2/components/infobuttonV2.scss

@@ -4,36 +4,36 @@
 .digit-info-button {
     @apply text-center cursor-pointer outline-none flex max-w-full items-center justify-center h-10;
     width: fit-content;
-    padding-left: theme("digitv2.spacers.spacer6");
-    padding-right: theme("digitv2.spacers.spacer6");
-    gap: theme("digitv2.spacers.spacer2");
+    padding-left: var(--digitv2-spacers-spacer6);
+    padding-right: var(--digitv2-spacers-spacer6);
+    gap: var(--digitv2-spacers-spacer2);
     min-width: 6.5625rem;
 
     &.info{
-        background-color: theme("digitv2.lightTheme.alert-info");
+        background-color: var(--digitv2-lightTheme-alert-info);
     }
 
     &.error{
-        background-color: theme("digitv2.lightTheme.alert-error");
+        background-color: var(--digitv2-lightTheme-alert-error);
     }
 
     &.success{
-        background-color: theme("digitv2.lightTheme.alert-success");
+        background-color: var(--digitv2-lightTheme-alert-success);
     }
 
     &.warning{
-        background-color: theme("digitv2.lightTheme.alert-warning");
+        background-color: var(--digitv2-lightTheme-alert-warning);
     }
   
     h1 {
       @include typography-button-large;
       margin: 0;
-      color: theme("digitv2.lightTheme.paper-primary") !important;
+      color: var(--digitv2-lightTheme-paper-primary) !important;
     }
   
     &.disabled {
       @apply opacity-50;
-      background: theme("digitv2.lightTheme.text-disabled");
+      background: var(--digitv2-lightTheme-text-disabled);
     }
   
     &:focus {
@@ -41,14 +41,14 @@
     }
   
     &:hover {
-      box-shadow: theme("digitv2.spacers.spacer0") -0.125rem theme("digitv2.spacers.spacer0") theme("digitv2.spacers.spacer0") theme("digitv2.lightTheme.text-primary") inset;
+      box-shadow: var(--digitv2-spacers-spacer0) -0.125rem var(--digitv2-spacers-spacer0) var(--digitv2-spacers-spacer0) var(--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;
+      box-shadow: var(--digitv2-spacers-spacer0) -0.125rem var(--digitv2-spacers-spacer0) var(--digitv2-spacers-spacer0) #0B0C0C inset, var(--digitv2-spacers-spacer0) 0.063rem 0.175rem var(--digitv2-spacers-spacer0) #00000040;
   
       h1{
-        font-weight: theme("digitv2.fontWeight.bold");
+        font-weight: var(--digitv2-fontWeight-bold);
       }
     }
   

package/src/digitv2/components/labelFieldPairV2.scss

@@ -10,16 +10,16 @@
    }
 
    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
-     gap: theme("digitv2.spacers.spacer5");
+     gap: var(--digitv2-spacers-spacer5);
    }
 
    @media (max-aspect-ratio: 9/16) {
      @apply flex-col items-start;
-     gap: theme("digitv2.spacers.spacer4");
+     gap: var(--digitv2-spacers-spacer4);
    }
 
    @media (min-aspect-ratio: 3/4) {
-     gap: theme("digitv2.spacers.spacer6");
+     gap: var(--digitv2-spacers-spacer6);
    }
 
    .digit-text-block-wrap {
@@ -32,14 +32,14 @@
 
    &.vertical {
      @apply flex-col items-start;
-     gap: theme("digitv2.spacers.spacer2");
+     gap: var(--digitv2-spacers-spacer2);
 
      .digit-text-block-wrap {
-       margin-top: theme("digitv2.spacers.spacer0");
+       margin-top: var(--digitv2-spacers-spacer0);
      }
 
      .digit-radio-options-wrap {
-       margin-top: theme("digitv2.spacers.spacer0");
+       margin-top: var(--digitv2-spacers-spacer0);
      }
 
    }
@@ -62,7 +62,7 @@
    }
 
    &.removeMargin{
-    margin-bottom: theme("digitv2.spacers.spacer0");
+    margin-bottom: var(--digitv2-spacers-spacer0);
    }
 
    &.digit-formcomposer-fieldpair{