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

package/src/digitv2/pages/employee/inboxsearchcomposer.scss

@@ -228,16 +228,16 @@
             height: 100%;
             display: grid;
             grid-template-columns: 20% 1fr;
-            gap: theme("digitv2.spacers.spacer6");
+            gap: var(--digitv2-spacers-spacer6);
 
             .digit-section {
 
                 &.links,
                 &.search{
-                    background-color: theme("digitv2.lightTheme.paper-primary");
+                    background-color: var(--digitv2-lightTheme-paper-primary);
                     box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
-                    border-radius: theme("digitv2.spacers.spacer1");
-                    padding: theme("digitv2.spacers.spacer6");
+                    border-radius: var(--digitv2-spacers-spacer1);
+                    padding: var(--digitv2-spacers-spacer6);
                     justify-content: flex-start;
                     display: flex;
                     align-items: center;
@@ -254,18 +254,18 @@
 
                     &.tab{
                         background: none !important;
-                        padding: theme("digitv2.spacers.spacer0");
+                        padding: var(--digitv2-spacers-spacer0);
                         box-shadow: none;
 
                         .digit-search-wrapper{
-                            padding: theme("digitv2.spacers.spacer6");
+                            padding: var(--digitv2-spacers-spacer6);
                         }
                     }
                 }
 
                 &.filter{
                     .digit-inbox-search-composer-filter-card-content{
-                        gap:theme("digitv2.spacers.spacer4")
+                        gap:var(--digitv2-spacers-spacer4)
                     }
                 }
 
@@ -275,10 +275,10 @@
                             display: flex;
                             align-items: center;
                             justify-content: flex-end;
-                            gap: theme("digitv2.spacers.spacer6");
+                            gap: var(--digitv2-spacers-spacer6);
 
                             &.add-margin{
-                                margin-top:theme("digitv2.spacers.spacer6");
+                                margin-top:var(--digitv2-spacers-spacer6);
                             }
 
                             &.inbox {
@@ -308,8 +308,8 @@
 
 .digit-inbox-search-composer-header {
     @include typography-heading-xl;
-    color: theme("digitv2.lightTheme.primary-2");
-    margin-bottom: theme("digitv2.spacers.spacer6");
+    color: var(--digitv2-lightTheme-primary-2);
+    margin-bottom: var(--digitv2-spacers-spacer6);
     line-height: normal;
 }
 
@@ -320,45 +320,45 @@
     justify-content: space-between;
 
     .digit-inbox-search-composer-action{
-        margin-bottom: theme("digitv2.spacers.spacer6");
+        margin-bottom: var(--digitv2-spacers-spacer6);
     }
 }
 
 .digit-inbox-search-links-container {
     .digit-inbox-search-links-header {
         display: flex;
-        gap: theme("digitv2.spacers.spacer2");
+        gap: var(--digitv2-spacers-spacer2);
         align-items: center;
-        margin-bottom: theme("digitv2.spacers.spacer6");
+        margin-bottom: var(--digitv2-spacers-spacer6);
 
         .digit-inbox-search-links-header-logo {
-            width: theme("digitv2.spacers.spacer8");
-            height: theme("digitv2.spacers.spacer8");
+            width: var(--digitv2-spacers-spacer8);
+            height: var(--digitv2-spacers-spacer8);
         }
 
         .digit-inbox-search-links-header-text {
             @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;
         }
     }
@@ -366,28 +366,28 @@
     .digit-inbox-search-links-contents {
         display: flex;
         flex-direction: column;
-        gap: theme("digitv2.spacers.spacer4");
+        gap: var(--digitv2-spacers-spacer4);
 
         a {
-            color: theme("digitv2.lightTheme.primary-1") !important;
+            color: var(--digitv2-lightTheme-primary-1) !important;
         }
 
         .digit-inbox-search-link {
             @include typography-link-L;
-            color: theme("digitv2.lightTheme.primary-1");
+            color: var(--digitv2-lightTheme-primary-1);
         }
     }
 }
 
 .digit-inbox-search-composer-label-pair {
-    margin-bottom: theme("digitv2.spacers.spacer0");
+    margin-bottom: var(--digitv2-spacers-spacer0);
 }
 
 .digit-search-wrapper {
     .digit-search-field-wrapper {
         display: grid;
-        row-gap: theme("digitv2.spacers.spacer6");
-        column-gap: theme("digitv2.spacers.spacer4");
+        row-gap: var(--digitv2-spacers-spacer6);
+        column-gap: var(--digitv2-spacers-spacer4);
         grid-template-columns: repeat(3, 1fr);
 
         &.inbox {
@@ -434,7 +434,7 @@
 .digit-custom-row-wrapper{
     display: flex;
     flex-direction: column;
-    gap: theme("digitv2.spacers.spacer6");
+    gap: var(--digitv2-spacers-spacer6);
 }
 
 .footer-pagination-content {
@@ -457,31 +457,31 @@
         justify-content: space-between;
 
         .digit-results-card-heading {
-            color: theme("digitv2.lightTheme.primary-2");
-            font-family: theme("digitv2.fontFamily.sans");
-            font-style: theme("digitv2.fontStyle.normal");
-            font-weight: theme("digitv2.fontWeight.bold");
-            line-height: theme("digitv2.lineHeight.lineheight1");
+            color: var(--digitv2-lightTheme-primary-2);
+            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);
             }
         }
 
         .digit-results-card-tags {
             display: flex;
-            gap: theme("digitv2.spacers.spacer4");
+            gap: var(--digitv2-spacers-spacer4);
         }
     }
 }
@@ -495,7 +495,7 @@
             justify-content: center;
 
             svg {
-                margin-left: theme("digitv2.spacers.spacer0");
+                margin-left: var(--digitv2-spacers-spacer0);
             }
         }
     }

package/src/digitv2/pages/employee/reactdatatable.scss

@@ -29,14 +29,14 @@
 .rdt_TableRow {
     &.selectedRow {
         background-color: #FBEEE8 !important;
-        border-bottom-color: theme("digitv2.lightTheme.generic-divider") !important;
+        border-bottom-color: var(--digitv2-lightTheme-generic-divider) !important;
     }
 }
 
 .rdt_TableCol_Sortable {
     display: flex;
     align-items: center;
-    gap: theme("digitv2.spacers.spacer1");
+    gap: var(--digitv2-spacers-spacer1);
 
     &:hover {
         opacity: 1 !important;
@@ -54,7 +54,7 @@
 }
 
 .rdt_TableCol {
-    border-radius: theme("digitv2.spacers.spacer0") !important;
+    border-radius: var(--digitv2-spacers-spacer0) !important;
 
     &:last-of-type {
         border-left: none !important;
@@ -62,7 +62,7 @@
 }
 
 .rdt_TableCol {
-    border-radius: theme("digitv2.spacers.spacer0") !important;
+    border-radius: var(--digitv2-spacers-spacer0) !important;
 
     &:last-of-type {
         border-left: none !important;
@@ -86,33 +86,33 @@
 }
 
 .digit-data-table::-webkit-scrollbar-track {
-    background-color: theme("digitv2.lightTheme.generic-divider");
+    background-color: var(--digitv2-lightTheme-generic-divider);
     border-radius: 0.563rem;
 }
 
 .digit-data-table::-webkit-scrollbar-thumb {
-    background-color: theme("digitv2.lightTheme.generic-divider");
+    background-color: var(--digitv2-lightTheme-generic-divider);
     border-radius: 0.563rem;
 }
 
 .digit-data-table::-webkit-scrollbar {
-    width: theme("digitv2.spacers.spacer2");
-    background-color: theme("digitv2.lightTheme.generic-divider");
+    width: var(--digitv2-spacers-spacer2);
+    background-color: var(--digitv2-lightTheme-generic-divider);
 }
 
 .digit-data-table::-webkit-scrollbar:horizontal {
-    height: theme("digitv2.spacers.spacer2");
-    background-color: theme("digitv2.lightTheme.generic-divider");
+    height: var(--digitv2-spacers-spacer2);
+    background-color: var(--digitv2-lightTheme-generic-divider);
 }
 
 .digit-data-table-select-checkbox {
-    margin-bottom: theme("digitv2.spacers.spacer0");
+    margin-bottom: var(--digitv2-spacers-spacer0);
 }
 
 .rdt_Pagination {
     margin-top: -1rem;
     border: 0.063rem solid #d6d5d4;
-    border-top: theme("digitv2.spacers.spacer0");
+    border-top: var(--digitv2-spacers-spacer0);
 }
 
 
@@ -126,7 +126,7 @@
 
 .digit-dataTable-actions-container{
     display: flex;
-    gap:theme("digitv2.spacers.spacer2");
+    gap:var(--digitv2-spacers-spacer2);
     align-items: center;
     flex-wrap: wrap;
 }

package/src/digitv2/pages/employee/workbench.scss

@@ -3,7 +3,7 @@
 
 .bread-crumb.workbench-bredcrumb{
 a{
-  color: theme("digitv2.lightTheme.primary-1");
+  color: var(--digitv2-lightTheme-primary-1);
 }
 }
 .workbench{
@@ -13,7 +13,7 @@ a{
   .digit-form-composer-sub-header {
     @include typography-text-heading-m;
     padding-left: 1rem;
-    @media (max-width: theme("digitv2.screens.mobile")) {
+    @media (max-width: var(--digitv2-screens-mobile)) {
       padding-left: 0;
     }
   }
@@ -31,7 +31,7 @@ a{
           display: flex;
           padding: 1em 0 0 1em;
 
-          @media (max-width: theme("digitv2.screens.mobile")) {
+          @media (max-width: var(--digitv2-screens-mobile)) {
             flex-direction: column;
           }
 
@@ -78,7 +78,7 @@ a{
 
             /* tablet view*/
 
-            @media (max-width: theme("digitv2.screens.tablet")) {
+            @media (max-width: var(--digitv2-screens-tablet)) {
               max-width: 11rem;
               margin-right: 1.5rem;
 
@@ -86,7 +86,7 @@ a{
 
             /* mobile view*/
 
-            @media (max-width: theme("digitv2.screens.mobile")) {
+            @media (max-width: var(--digitv2-screens-mobile)) {
               /*max-width: 10.2rem;*/
               @apply w-full;
 
@@ -97,7 +97,7 @@ a{
           .all-input-field-wrapper {
 
             @apply w-3/5;
-            @media (max-width: theme("digitv2.screens.mobile")) {
+            @media (max-width: var(--digitv2-screens-mobile)) {
               @apply w-full;
             }
 
@@ -112,7 +112,7 @@ a{
               margin-bottom: 1rem;
               /* tablet view*/
 
-              @media (max-width: theme("digitv2.screens.tablet")) {
+              @media (max-width: var(--digitv2-screens-tablet)) {
                 max-width: 27.5rem;
                 min-width: 12.5rem;
 
@@ -120,7 +120,7 @@ a{
 
               /* mobile view*/
 
-              @media (max-width: theme("digitv2.screens.mobile")) {
+              @media (max-width: var(--digitv2-screens-mobile)) {
                 max-width: 20.5rem;
                 min-width: 9.5rem;
                 @apply w-full;
@@ -143,7 +143,7 @@ a{
                 }
 
                 .digit__control--is-focused {
-                  border-color: theme("digitv2.lightTheme.primary-1") !important;
+                  border-color: var(--digitv2-lightTheme-primary-1) !important;
                   box-shadow: none;
                   box-sizing: unset;
                   @apply outline-none;
@@ -159,10 +159,10 @@ a{
                 }
 
                 .digit__control:focus {
-                  border-color: theme("digitv2.lightTheme.primary-1");
+                  border-color: var(--digitv2-lightTheme-primary-1);
 
                   .digit__value-container:focus {
-                    border-color: theme("digitv2.lightTheme.primary-1");
+                    border-color: var(--digitv2-lightTheme-primary-1);
 
                   }
                 }
@@ -170,20 +170,20 @@ a{
 
               &.form-select:focus {
                 @apply outline-none;
-                border-color: theme("digitv2.lightTheme.primary-1");
+                border-color: var(--digitv2-lightTheme-primary-1);
 
               }
             }
 
             .form-control:read-only {
-              background-color: theme("digitv2.lightTheme.generic-background");
-              color: theme("digitv2.lightTheme.text-secondary");
+              background-color: var(--digitv2-lightTheme-generic-background);
+              color: var(--digitv2-lightTheme-text-secondary);
             }
 
             .form-control:focus {
 
               @apply outline-none;
-              border-color: theme("digitv2.lightTheme.primary-1");
+              border-color: var(--digitv2-lightTheme-primary-1);
             }
 
             textarea.form-control {
@@ -237,7 +237,7 @@ a{
                 }
          
                 input[type="checkbox"]#digit_root_active {
-                  accent-color: theme("digitv2.lightTheme.primary-1");
+                  accent-color: var(--digitv2-lightTheme-primary-1);
                 }
 
                 input:checked,
@@ -365,11 +365,11 @@ a{
                 .array-remove-button {
                   cursor: pointer;
                   background-color: inherit !important;
-                  @media (max-width: theme("digitv2.screens.mobile")) {
+                  @media (max-width: var(--digitv2-screens-mobile)) {
                     padding:0px;
                   }  
                   h2{
-                    @media (max-width: theme("digitv2.screens.mobile")) {
+                    @media (max-width: var(--digitv2-screens-mobile)) {
                         display: none;
                     }
                   }
@@ -396,7 +396,7 @@ a{
               height: 1.7em;
               margin-top: 0.5rem;
 
-              @media (max-width: theme("digitv2.screens.mobile")) {
+              @media (max-width: var(--digitv2-screens-mobile)) {
                 height: auto;
                 width: 100%;
               }
@@ -534,13 +534,13 @@ a{
   width: 100%;
   display: flex;
   padding-top: 2.1rem;
-  @media (max-width: theme("digitv2.screens.mobile")) {
+  @media (max-width: var(--digitv2-screens-mobile)) {
     flex-direction: column; 
  }
  .employee-select-wrap.form-field{
   @apply w-1/4;
   margin-right:1rem ;
-  @media (max-width: theme("digitv2.screens.mobile")) {
+  @media (max-width: var(--digitv2-screens-mobile)) {
     @apply w-full;
  }
   }
@@ -550,7 +550,7 @@ a{
   padding-left:0.8rem ;
   padding-right:0.8rem ;
   &-row-mdms:hover{
-    background-color:  theme("digitv2.lightTheme.primary-bg"); /* Change this to the desired hover color */
+    background-color:  var(--digitv2-lightTheme-primary-bg); /* Change this to the desired hover color */
     cursor: pointer;
   }
 }
@@ -574,11 +574,11 @@ a{
     text-decoration: none;
     .browse-text {
       text-decoration: none;
-      color: theme("digitv2.lightTheme.primary-1"); 
+      color: var(--digitv2-lightTheme-primary-1); 
       transition: color 0.3s;
     }
     .browse-text:hover {
-        color: theme("digitv2.lightTheme.primary-1");
+        color: var(--digitv2-lightTheme-primary-1);
         text-decoration: underline; 
         cursor: pointer;
     }

package/src/index.scss

@@ -175,9 +175,9 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 input[readonly] {
-  background-color:  theme("digitv2.lightTheme.generic-background");
-  border-color: theme("digitv2.lightTheme.text-secondary");
-  color: theme("digitv2.lightTheme.text-secondary");
+  background-color:  var(--digitv2-lightTheme-generic-background);
+  border-color: var(--digitv2-lightTheme-text-secondary);
+  color: var(--digitv2-lightTheme-text-secondary);
   --border-opacity: 1;
   border-color: #9E9E9E;
   border-color: rgba(158, 158, 158, var(--border-opacity));