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

package/src/digitv2/components/stepperV2.scss

@@ -30,65 +30,65 @@
   .digit-stepper-content {
     @apply flex flex-col items-center font-sans font-regular;
     min-height: 4rem;
-    gap: theme("digitv2.spacers.spacer2");
-    color: theme("digitv2.lightTheme.text-secondary");
-    font-size: theme("digitv2.spacers.spacer4");
-    line-height: theme("digitv2.spacers.spacer6");
+    gap: var(--digitv2-spacers-spacer2);
+    color: var(--digitv2-lightTheme-text-secondary);
+    font-size: var(--digitv2-spacers-spacer4);
+    line-height: var(--digitv2-spacers-spacer6);
     text-align: center;
 
 
     .stepper-label {
       @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);
       }
       @apply text-center;
-      color: theme("digitv2.lightTheme.text-secondary");
-      letter-spacing: theme("digitv2.spacers.spacer0");
+      color: var(--digitv2-lightTheme-text-secondary);
+      letter-spacing: var(--digitv2-spacers-spacer0);
 
       &.completed {
-        color: theme("digitv2.lightTheme.text-primary");
+        color: var(--digitv2-lightTheme-text-primary);
       }
 
       &.current {
         @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);
         }
         line-height: 1.37rem;
-        color: theme("digitv2.lightTheme.text-primary");
+        color: var(--digitv2-lightTheme-text-primary);
       }
 
       &.vertical {
@@ -104,10 +104,10 @@
 
   .stepper-circle {
     @apply flex text-center justify-center items-center font-regular w-8 h-8;
-    background-color: theme("digitv2.lightTheme.paper-primary");
+    background-color: var(--digitv2-lightTheme-paper-primary);
     border-radius: 50%;
-    margin-top: theme("digitv2.spacers.spacer1");
-    border: 0.125rem solid theme("digitv2.lightTheme.generic-divider");
+    margin-top: var(--digitv2-spacers-spacer1);
+    border: 0.125rem solid var(--digitv2-lightTheme-generic-divider);
     color: #787878;
 
     @media (max-aspect-ratio: 9/16) {
@@ -117,16 +117,16 @@
 
   .active {
     @apply font-bold;
-    background-color: theme("digitv2.lightTheme.primary-1");
-    border-color: theme("digitv2.lightTheme.primary-1");
-    color: theme("digitv2.lightTheme.paper-primary");
+    background-color: var(--digitv2-lightTheme-primary-1);
+    border-color: var(--digitv2-lightTheme-primary-1);
+    color: var(--digitv2-lightTheme-paper-primary);
   }
 
   .stepper-connect {
     @apply absolute;
-    top: theme("digitv2.spacers.spacer5");
-    left: calc(50% + (theme("digitv2.spacers.spacer2")));
-    right: calc(-50% + (theme("digitv2.spacers.spacer2")));
+    top: var(--digitv2-spacers-spacer5);
+    left: calc(50% + (var(--digitv2-spacers-spacer2)));
+    right: calc(-50% + (var(--digitv2-spacers-spacer2)));
     border-top: 0.125rem solid theme("colors.border");
     z-index: -1;
     height: 0.125rem;
@@ -157,15 +157,15 @@
       }
     }
     &.active {
-      background-color: theme("digitv2.lightTheme.primary-1");
-      border-color: theme("digitv2.lightTheme.primary-1");
-      height: theme("digitv2.spacers.spacer1");
-      border-top: theme("digitv2.spacers.spacer1") solid theme("digitv2.lightTheme.primary-1");
+      background-color: var(--digitv2-lightTheme-primary-1);
+      border-color: var(--digitv2-lightTheme-primary-1);
+      height: var(--digitv2-spacers-spacer1);
+      border-top: var(--digitv2-spacers-spacer1) solid var(--digitv2-lightTheme-primary-1);
     }
 
     &.vertical {
-      top: calc(50% + (theme("digitv2.spacers.spacer2")));
-      bottom: calc(-50% + (theme("digitv2.spacers.spacer2")));
+      top: calc(50% + (var(--digitv2-spacers-spacer2)));
+      bottom: calc(-50% + (var(--digitv2-spacers-spacer2)));
       left: -3.1rem;
       width: 0.125rem;
       height: auto;
@@ -173,7 +173,7 @@
 
       &.active {
         background-color: transparent;
-        border-color: theme("digitv2.lightTheme.primary-1");
+        border-color: var(--digitv2-lightTheme-primary-1);
       }
       @media (max-aspect-ratio: 9/16) {
         left: -3.65rem;
@@ -196,56 +196,56 @@
 
   .digit-stepper-content:hover {
     .stepper-circle.active {
-      outline: theme("digitv2.spacers.spacer1") solid #F477381F;
+      outline: var(--digitv2-spacers-spacer1) solid #F477381F;
     }
 
     .stepper-label {
       &.completed {
         @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);
         }
         line-height: 1.37rem;
-        color: theme("digitv2.lightTheme.text-primary");
+        color: var(--digitv2-lightTheme-text-primary);
       }
     }
   }
 }
 
 .digit-stepper-container::-webkit-scrollbar {
-  width: theme("digitv2.spacers.spacer0");
-  height: theme("digitv2.spacers.spacer0");
-  background-color: theme("digitv2.lightTheme.generic-background");
+  width: var(--digitv2-spacers-spacer0);
+  height: var(--digitv2-spacers-spacer0);
+  background-color: var(--digitv2-lightTheme-generic-background);
 }
 
 .digit-stepper-container::-webkit-scrollbar-track {
-  background-color: theme("digitv2.lightTheme.generic-background");
+  background-color: var(--digitv2-lightTheme-generic-background);
   border-radius: 0.563rem;
 }
 
 .digit-stepper-container::-webkit-scrollbar-thumb {
-  background-color: theme("digitv2.lightTheme.generic-divider");
+  background-color: var(--digitv2-lightTheme-generic-divider);
   border-radius: 0.563rem;
 }
 
 .stepper-vertical-divider{
   position: absolute;
-  left: theme("digitv2.spacers.spacer10");
-  margin: theme("digitv2.spacers.spacer0");
+  left: var(--digitv2-spacers-spacer10);
+  margin: var(--digitv2-spacers-spacer0);
 }

package/src/digitv2/components/summaryCardFieldPairV2.scss

@@ -6,72 +6,72 @@
   display: flex;
   height: fit-content;
   background-color: transparent;
-  gap: theme("digitv2.spacers.spacer1");
+  gap: var(--digitv2-spacers-spacer1);
 
   .digit-viewcard-label{
       @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-pre-wrap break-words w-full;
       word-break: break-word;
-      color: theme("digitv2.lightTheme.text-primary");
+      color: var(--digitv2-lightTheme-text-primary);
   }
 
   .digit-viewcard-value{
       @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);
       }
       @apply whitespace-pre-wrap break-words w-full;
-      color: theme("digitv2.lightTheme.text-primary");
+      color: var(--digitv2-lightTheme-text-primary);
   }
 
   &.inline{
       flex-direction: row;
 
       @media (min-width: 48rem) {
-          gap: theme("digitv2.spacers.spacer6");
+          gap: var(--digitv2-spacers-spacer6);
       }
   
       @media (min-width: 30.063rem) and (max-width: 47.938rem) {
-          gap: theme("digitv2.spacers.spacer5");
+          gap: var(--digitv2-spacers-spacer5);
       }
   
       @media (max-width: 30rem) {
-          gap: theme("digitv2.spacers.spacer4");
+          gap: var(--digitv2-spacers-spacer4);
       }
 
       .digit-viewcard-label{

package/src/digitv2/components/summaryCardV2.scss

@@ -4,81 +4,81 @@
 .digit-view-card {
   .digit-view-card-header {
     @include typography-heading-l;
-    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-l.mobile");
+      font-size: var(--digitv2-fontSize-heading-l-mobile);
     }
 
     @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
       /* Media query for tablets */
-      font-size: theme("digitv2.fontSize.heading-l.tablet");
+      font-size: var(--digitv2-fontSize-heading-l-tablet);
     }
 
     @media (min-aspect-ratio: 3/4) {
       /* Media query for desktop */
-      font-size: theme("digitv2.fontSize.heading-l.desktop");
+      font-size: var(--digitv2-fontSize-heading-l-desktop);
     }
 
-    padding-bottom: theme("digitv2.spacers.spacer2");
-    color: theme("digitv2.lightTheme.text-primary");
+    padding-bottom: var(--digitv2-spacers-spacer2);
+    color: var(--digitv2-lightTheme-text-primary);
     line-height: normal;
 
     @media (max-width: 30rem) {
-      padding-bottom: theme("digitv2.spacers.spacer1");
+      padding-bottom: var(--digitv2-spacers-spacer1);
     }
   }
 
   .digit-view-card-subheader {
     @include typography-heading-m;
-    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-m.mobile");
+      font-size: var(--digitv2-fontSize-heading-m-mobile);
     }
 
     @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
       /* Media query for tablets */
-      font-size: theme("digitv2.fontSize.heading-m.tablet");
+      font-size: var(--digitv2-fontSize-heading-m-tablet);
     }
 
     @media (min-aspect-ratio: 3/4) {
       /* Media query for desktop */
-      font-size: theme("digitv2.fontSize.heading-m.desktop");
+      font-size: var(--digitv2-fontSize-heading-m-desktop);
     }
 
-    color: theme("digitv2.lightTheme.primary-2");
+    color: var(--digitv2-lightTheme-primary-2);
     line-height: normal;
   }
 
   .view-card-field-pairs {
     display: flex;
     flex-direction: column;
-    gap: theme("digitv2.spacers.spacer4");
+    gap: var(--digitv2-spacers-spacer4);
     position: relative;
 
     &.two-column-layout {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
-      gap: theme("digitv2.spacers.spacer4");
+      gap: var(--digitv2-spacers-spacer4);
 
       &.with-divider{
-        grid-column-gap:theme("digitv2.spacers.spacer8");
+        grid-column-gap:var(--digitv2-spacers-spacer8);
       }
     }
 
     .vertical-summarycard-divider {
       position: absolute;
       height: 100%;
-      border: 0.063rem solid theme("digitv2.lightTheme.generic-divider");
+      border: 0.063rem solid var(--digitv2-lightTheme-generic-divider);
       z-index: 1;
     }
   }
@@ -89,15 +89,15 @@
   flex-direction: column;
 
   @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
-    gap: theme("digitv2.spacers.spacer5");
+    gap: var(--digitv2-spacers-spacer5);
   }
 
   @media (min-aspect-ratio: 3/4) {
-    gap: theme("digitv2.spacers.spacer6");
+    gap: var(--digitv2-spacers-spacer6);
   }
 
   @media (max-aspect-ratio: 9/16) {
-    gap: theme("digitv2.spacers.spacer4");
+    gap: var(--digitv2-spacers-spacer4);
   }
 
 }

package/src/digitv2/components/switchV2.scss

@@ -7,10 +7,10 @@
 }
 
 .digit-switch {
-  width: theme("digitv2.spacers.spacer11");
-  height: theme("digitv2.spacers.spacer6");
+  width: var(--digitv2-spacers-spacer11);
+  height: var(--digitv2-spacers-spacer6);
   background-color: #BFBFBF;
-  border-radius: theme("digitv2.spacers.spacer4");
+  border-radius: var(--digitv2-spacers-spacer4);
   position: relative;
   cursor: pointer;
   transition: background-color 0.2s ease;
@@ -26,81 +26,81 @@
   }
 
   &.switch-disabled{
-    background-color: theme("digitv2.lightTheme.text-disabled");
+    background-color: var(--digitv2-lightTheme-text-disabled);
   }
 }
 
 .digit-switch.checked {
-  background-color: theme("digitv2.lightTheme.primary-1");
+  background-color: var(--digitv2-lightTheme-primary-1);
 }
 
 .digit-switch-toggle {
   width: 1.125rem;
   height: 1.125rem;
-  background-color: theme("digitv2.lightTheme.paper-primary");
+  background-color: var(--digitv2-lightTheme-paper-primary);
   border-radius: 50%;
   position: absolute;
   left: 0.125rem;
   transition: left 0.2s ease;
-  box-shadow: theme("digitv2.spacers.spacer0") 0.125rem theme("digitv2.spacers.spacer1") theme("digitv2.spacers.spacer0") #00230B33;
+  box-shadow: var(--digitv2-spacers-spacer0) 0.125rem var(--digitv2-spacers-spacer1) var(--digitv2-spacers-spacer0) #00230B33;
 }
 
 .digit-switch.checked .digit-switch-toggle {
-  left: theme("digitv2.spacers.spacer6");
-  background-color: theme("digitv2.lightTheme.paper-primary");
+  left: var(--digitv2-spacers-spacer6);
+  background-color: var(--digitv2-lightTheme-paper-primary);
 }
 
 .digit-switch-label {
   @include typography-body-s;
-  margin-left: 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");
+  margin-left: var(--digitv2-spacers-spacer2);
+  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) {
-    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) {
-    font-size: theme("digitv2.fontSize.body-s.tablet");
+    font-size: var( --digitv2-fontSize-body-s-tablet);
   }
 
   @media (min-aspect-ratio: 3/4) {
-    font-size: theme("digitv2.fontSize.body-s.desktop");
+    font-size: var( --digitv2-fontSize-body-s-desktop);
   }
 
   @apply text-left;
   word-break: break-word;
-  letter-spacing: theme("digitv2.spacers.spacer0");
-  color: theme("digitv2.lightTheme.text-primary");
+  letter-spacing: var(--digitv2-spacers-spacer0);
+  color: var(--digitv2-lightTheme-text-primary);
 
   &.labelFirst{
-    margin:theme("digitv2.spacers.spacer0");
-    margin-right:theme("digitv2.spacers.spacer2");
+    margin:var(--digitv2-spacers-spacer0);
+    margin-right:var(--digitv2-spacers-spacer2);
   }
 }
 
 
 .digit-switch-shape-on {
   position: absolute;
-  top: theme("digitv2.spacers.spacer2");
+  top: var(--digitv2-spacers-spacer2);
   width: 0.125rem;
-  height: theme("digitv2.spacers.spacer2");
+  height: var(--digitv2-spacers-spacer2);
   border-radius: 0.063rem;
   left: 0.625rem;
-  background-color: theme("digitv2.lightTheme.primary-bg");
+  background-color: var(--digitv2-lightTheme-primary-bg);
 }
 
 .digit-switch-shape-off {
   position: absolute;
-  top: theme("digitv2.spacers.spacer2");
-  width: theme("digitv2.spacers.spacer2");
-  height: theme("digitv2.spacers.spacer2");
-  right: theme("digitv2.spacers.spacer2");
+  top: var(--digitv2-spacers-spacer2);
+  width: var(--digitv2-spacers-spacer2);
+  height: var(--digitv2-spacers-spacer2);
+  right: var(--digitv2-spacers-spacer2);
   background-color: transparent;
   border-radius: 50%;
-  border: 0.063rem solid theme("digitv2.lightTheme.generic-background");
+  border: 0.063rem solid var(--digitv2-lightTheme-generic-background);
 }
 
 .digit-switch-container.switch-disabled {
@@ -110,6 +110,6 @@
   }
 
   .digit-switch-label {
-    color: theme("digitv2.lightTheme.text-disabled");
+    color: var(--digitv2-lightTheme-text-disabled);
   }
 }