@egovernments/digit-ui-components-css 0.2.0-beta.8 → 0.2.0-rc.16

package/package.json

@@ -1,52 +1,57 @@
 {
   "name": "@egovernments/digit-ui-components-css",
-  "version": "0.2.0-beta.8",
+  "version": "0.2.0-rc.16",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egovernments.org>",
   "engines": {
-    "node": ">=14"
+    "node": ">=20"
   },
   "cssConfig": {
     "prefix": ""
   },
   "scripts": {
-    "start": "gulp build",
-    "build": "cross-env NODE_ENV=production gulp build",
-    "build:prod": "NODE_ENV=production gulp build",
-    "prepublish": "yarn build:prod",
+    "generate-theme": "node extract-theme.js",
+    "start": "cross-env NODE_ENV=development webpack serve --config webpack.config.js",
+    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
+    "prepublish": "yarn build",
     "publish:css-develop": "npm publish --tag core-v0.1",
     "publish:css": "npm publish --access public",
-    "deploy": "gulp && cp -R svg example && cp -R img example && gh-pages -d example"
+    "deploy": "yarn build && cp -R svg dist && cp -R img dist && gh-pages -d dist"
   },
   "browserslist": [
     "> 3%",
     "last 2 versions"
   ],
   "style": "./dist/index.css",
-  "dependencies": {},
+  "dependencies": {
+    "react-date-picker": "^12.0.1",
+    "react-date-range": "^2.0.1",
+    "react-datepicker": "4.8.0"
+  },
   "devDependencies": {
-    "node-sass": "^4.14.1",
-    "normalize.css": "^8.0.1",
-    "tailwindcss": "^1.8.10",
-    "autoprefixer": "^10.0.0",
-    "cssnano": "^4.1.10",
-    "gh-pages": "3.1.0",
-    "gulp": "^4.0.2",
-    "gulp-clean": "^0.4.0",
-    "gulp-clean-css": "^4.3.0",
-    "gulp-livereload": "^4.0.2",
-    "gulp-postcss": "9.0.0",
-    "gulp-rename": "^2.0.0",
-    "gulp-sass": "^4.1.0",
-    "postcss": "8.3.11",
-    "postcss-cli": "^8.0.0",
+    "autoprefixer": "^10.4.21",
+    "cross-env": "^7.0.3",
+    "css-loader": "^7.1.2",
+    "css-minimizer-webpack-plugin": "^7.0.2",
+    "cssnano": "^7.0.0",
+    "gh-pages": "6.1.1",
+    "mini-css-extract-plugin": "^2.9.1",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^10.1.0",
     "postcss-header": "^2.0.0",
-    "postcss-import": "^12.0.1",
-    "postcss-prefixer": "^2.1.2",
-    "postcss-preset-env": "^6.7.0",
-    "postcss-scss": "^3.0.1",
-    "sass": "^1.26.11"
+    "postcss-import": "^16.1.0",
+    "postcss-loader": "^8.1.1",
+    "postcss-nested": "^6.0.1",
+    "postcss-preset-env": "^9.6.0",
+    "postcss-scss": "^4.0.9",
+    "sass": "^1.77.8",
+    "sass-loader": "^16.0.0",
+    "tailwindcss": "^3.4.10",
+    "terser-webpack-plugin": "^5.3.10",
+    "webpack": "^5.95.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.2.0"
   },
   "files": [
     "dist/index.min.css",
@@ -55,13 +60,5 @@
     "img/**/*.png",
     "src/**/*.scss",
     "src/**/*.css"
-  ],
-  "keywords": [
-    "digit",
-    "egov",
-    "dpg",
-    "digit-ui",
-    "css",
-    "digit-ui-components"
   ]
 }

package/src/digitv2/components/FormComposerV2.scss

@@ -1,4 +1,5 @@
-@import url("../index.scss");
+@import './theme-variables.css';
+@import '../typography.scss';
 
 .digit-field-container {
   display: flex;
@@ -62,7 +63,7 @@
   width: fit-content !important;
   display: flex;
   align-items: center;
-  /* background: theme(colors.grey.mid); */
+  /* background: theme("colors.grey.mid"); */
   border-right: 0;
   padding-right: 5px;
 }
@@ -90,7 +91,7 @@
   width: fit-content !important;
   display: flex;
   align-items: center;
-  /* background: theme(colors.grey.mid); */
+  /* background: theme("colors.grey.mid"); */
   border-right: 0;
   padding-right: 5px;
 }
@@ -109,10 +110,10 @@
   gap: 10px;
 
   svg {
-    fill: theme(colors.primary.main);
+    fill: theme("colors.primary.main");
   }
 }
 
 .digit-form-composer-header {
-  font-size: theme(digitv2.fontSize.heading-l-dt);
+  font-size: theme("digitv2.fontSize.heading-l.desktop");
 }

package/src/digitv2/components/accordionV2.scss

@@ -1,80 +1,80 @@
+/* Import the generated theme variables */
+@import './theme-variables.css';
+@import '../typography.scss';
+
 .digit-accordion-title {
     display: flex;
     align-items: flex-start;
     cursor: pointer;
     background-color: transparent;
-    gap: theme(digitv2.spacers.spacer3);
+    gap: var(--digitv2-spacers-spacer3);
 
     @media (max-aspect-ratio: 9/16) {
-        padding: theme(digitv2.spacers.spacer4);
+        padding: var(--digitv2-spacers-spacer4);
     }
 
     @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
-        padding: theme(digitv2.spacers.spacer5);
+        padding: var(--digitv2-spacers-spacer5);
     }
 
     @media (min-aspect-ratio: 3/4) {
-        padding: theme(digitv2.spacers.spacer6);
+        padding: var(--digitv2-spacers-spacer6);
     }
 }
 
 .digit-accordion-icon {
-    width: theme(digitv2.spacers.spacer6);
-    height: theme(digitv2.spacers.spacer6);
+    width: var(--digitv2-spacers-spacer6);
+    height: var(--digitv2-spacers-spacer6);
     flex-shrink: 0;
 }
 
 .digit-accordion-number {
-    @extend .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);
+    @include typography-heading-s;
+    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);
     }
-    color: theme(digitv2.lightTheme.text-primary);
-    min-width: theme(digitv2.spacers.spacer6);
-    height: theme(digitv2.spacers.spacer6);
+    
+    color: var(--digitv2-lightTheme-text-primary);
+    min-width: var(--digitv2-spacers-spacer6);
+    height: var(--digitv2-spacers-spacer6);
     display: flex;
     align-items: center;
-    justify-content: center
+    justify-content: center;
 }
 
 .digit-accordion-header-title {
-    @extend .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);
+    @include typography-heading-s;
+    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);
     }
-    color: theme(digitv2.lightTheme.text-primary);
+    
+    color: var(--digitv2-lightTheme-text-primary);
     margin-top: 0.18rem;
     flex-grow: 1;
 }
@@ -87,72 +87,72 @@
     display: flex;
     gap: 0.625rem;
     flex-direction: column;
-    @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: 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);
-        padding: 0rem theme(digitv2.spacers.spacer4);
+        font-size: var(--digitv2-fontSize-body-s-mobile);
+        padding: 0rem var(--digitv2-spacers-spacer4);
     }
 
     @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
-        font-size: theme(digitv2.fontSize.body-s.tablet);
-        padding: 0rem theme(digitv2.spacers.spacer5);
+        font-size: var(--digitv2-fontSize-body-s-tablet);
+        padding: 0rem var(--digitv2-spacers-spacer5);
     }
 
     @media (min-aspect-ratio: 3/4) {
-        font-size: theme(digitv2.fontSize.body-s.desktop);
-        padding: 0rem theme(digitv2.spacers.spacer6);
+        font-size: var(--digitv2-fontSize-body-s-desktop);
+        padding: 0rem var(--digitv2-spacers-spacer6);
     }
 
-    color: theme(digitv2.lightTheme.text-primary);
+    color: var(--digitv2-lightTheme-text-primary);
 }
 
 .digit-accordion-content.open {
     max-height: fit-content;
 
     @media (max-aspect-ratio: 9/16) {
-        padding: theme(digitv2.spacers.spacer4);
+        padding: var(--digitv2-spacers-spacer4);
     }
 
     @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
-        padding: theme(digitv2.spacers.spacer5);
+        padding: var(--digitv2-spacers-spacer5);
     }
 
     @media (min-aspect-ratio: 3/4) {
-        padding: theme(digitv2.spacers.spacer6);
+        padding: var(--digitv2-spacers-spacer6);
     }
 }
 
 .digit-accordion {
     &.border {
-        border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
+        border: 0.063rem solid var(--digitv2-lightTheme-generic-divider);
     }
 
     &.borderRadius {
-        border-radius: theme(digitv2.spacers.spacer1);
+        border-radius: var(--digitv2-spacers-spacer1);
     }
 
     &.withDivider {
         .digit-accordion-content.open{
-            border-top: 1px solid theme(digitv2.lightTheme.generic-divider);
+            border-top: 1px solid var(--digitv2-lightTheme-generic-divider);
         }
     }
 
     &.no-divider {
         .digit-accordion-title {
-            padding-bottom: theme(digitv2.spacers.spacer0);
+            padding-bottom: var(--digitv2-spacers-spacer0);
         }
     }
 
     &.cardBg {
-        background-color: theme(digitv2.lightTheme.paper-primary);
+        background-color: var(--digitv2-lightTheme-paper-primary);
 
         &.nested {
-            background-color: theme(digitv2.lightTheme.paper-secondary);
+            background-color: var(--digitv2-lightTheme-paper-secondary);
         }
     }
 }
@@ -180,8 +180,8 @@
 .digit-accordion-toggle{
     display: flex;
     align-items: center;
-    width: theme(digitv2.spacers.spacer6);
-    height: theme(digitv2.spacers.spacer6);
+    width: var(--digitv2-spacers-spacer6);
+    height: var(--digitv2-spacers-spacer6);
 }
 
 .digit-accordion-toggle.animate-open svg {
@@ -197,15 +197,15 @@
     flex-direction: column;
 
     @media (max-aspect-ratio: 9/16) {
-        gap: theme(digitv2.spacers.spacer4);
+        gap: var(--digitv2-spacers-spacer4);
     }
 
     @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);
     }
 }
 

package/src/digitv2/components/alertCardV2.scss

@@ -1,20 +1,20 @@
-@import url("../index.scss");
-@import url("../typography.scss");
+@import './theme-variables.css';
+@import '../typography.scss';
 
 .digit-infobanner-wrap {
   @apply p-md flex flex-col; 
-  top: theme(digitv2.spacers.spacer5);
-  left: theme(digitv2.spacers.spacer5);
-  gap: theme(digitv2.spacers.spacer2);
-  background-color: theme(digitv2.lightTheme.alert-infobg);
+  top: theme("digitv2.spacers.spacer5");
+  left: theme("digitv2.spacers.spacer5");
+  gap: theme("digitv2.spacers.spacer2");
+  background-color: theme("digitv2.lightTheme.alert-infobg");
 
-  border: 0.063rem solid theme(digitv2.lightTheme.alert-info);
-  border-left-width: theme(digitv2.spacers.spacer1);
+  border: 0.063rem solid theme("digitv2.lightTheme.alert-info");
+  border-left-width: theme("digitv2.spacers.spacer1");
 
   div {
     @apply flex;
-    gap: theme(digitv2.spacers.spacer2);
-    min-height: theme(digitv2.spacers.spacer6);
+    gap: theme("digitv2.spacers.spacer2");
+    min-height: theme("digitv2.spacers.spacer6");
 
     svg {
       flex-shrink: 0;
@@ -23,63 +23,63 @@
 
   .digit-infobanner-header {
     @apply w-full max-w-full overflow-hidden text-left;
-    font-family: theme(digitv2.fontFamily.sans);
-    font-weight: theme(digitv2.fontWeight.bold);
-    color: theme(digitv2.lightTheme.alert-info);
-    font-size: theme(digitv2.spacers.spacer4);
+    font-family: theme("digitv2.fontFamily.sans");
+    font-weight: theme("digitv2.fontWeight.bold");
+    color: theme("digitv2.lightTheme.alert-info");
+    font-size: theme("digitv2.spacers.spacer4");
     line-height: 1.172rem;
-    letter-spacing: theme(digitv2.spacers.spacer0);
-    margin: 0.164rem theme(digitv2.spacers.spacer0);
+    letter-spacing: theme("digitv2.spacers.spacer0");
+    margin: 0.164rem theme("digitv2.spacers.spacer0");
     white-space: normal;
     word-break: break-word;
   }
 
   p {
     @apply whitespace-pre-line text-left;
-    font-weight: theme(digitv2.fontWeight.regular);
-    color: theme(digitv2.lightTheme.text-secondary);
-    font-style: theme(digitv2.fontStyle.normal);
-    font-family: theme(digitv2.fontFamily.sans);
+    font-weight: theme("digitv2.fontWeight.regular");
+    color: theme("digitv2.lightTheme.text-secondary");
+    font-style: theme("digitv2.fontStyle.normal");
+    font-family: theme("digitv2.fontFamily.sans");
     font-size: 0.875rem;
-    line-height: theme(digitv2.spacers.spacer5);
-    letter-spacing: theme(digitv2.spacers.spacer0);
-    margin: theme(digitv2.spacers.spacer0);
+    line-height: theme("digitv2.spacers.spacer5");
+    letter-spacing: theme("digitv2.spacers.spacer0");
+    margin: theme("digitv2.spacers.spacer0");
   }
 
   &.digit-core-variant {
-    margin: theme(digitv2.spacers.spacer8) theme(digitv2.spacers.spacer0);
+    margin: theme("digitv2.spacers.spacer8") theme("digitv2.spacers.spacer0");
     padding: 0.625rem;
     background-color: #ffe2b5;
-    border-radius: theme(digitv2.spacers.spacer1);
+    border-radius: theme("digitv2.spacers.spacer1");
   }
 
   &.success {
-    background-color: theme(digitv2.lightTheme.alert-successbg);
-    border: 0.063rem solid theme(digitv2.lightTheme.alert-success);
-    border-left-width: theme(digitv2.spacers.spacer1);
+    background-color: theme("digitv2.lightTheme.alert-successbg");
+    border: 0.063rem solid theme("digitv2.lightTheme.alert-success");
+    border-left-width: theme("digitv2.spacers.spacer1");
 
     .digit-infobanner-header{
-      color: theme(digitv2.lightTheme.alert-success);
+      color: theme("digitv2.lightTheme.alert-success");
     }
   }
 
   &.warning {
-    background-color: theme(digitv2.lightTheme.alert-warning-bg);
-    border: 0.063rem solid theme(digitv2.lightTheme.alert-warning);
-    border-left-width: theme(digitv2.spacers.spacer1);
+    background-color: theme("digitv2.lightTheme.alert-warning-bg");
+    border: 0.063rem solid theme("digitv2.lightTheme.alert-warning");
+    border-left-width: theme("digitv2.spacers.spacer1");
 
     .digit-infobanner-header{
-      color: theme(digitv2.lightTheme.alert-warning);
+      color: theme("digitv2.lightTheme.alert-warning");
     }
   }
 
   &.error {
-    background-color: theme(digitv2.lightTheme.alert-errorbg);
-    border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
-    border-left-width: theme(digitv2.spacers.spacer1);
+    background-color: theme("digitv2.lightTheme.alert-errorbg");
+    border: 0.063rem solid theme("digitv2.lightTheme.alert-error");
+    border-left-width: theme("digitv2.spacers.spacer1");
 
     .digit-infobanner-header{
-      color: theme(digitv2.lightTheme.alert-error);
+      color: theme("digitv2.lightTheme.alert-error");
     }
   }
 
@@ -108,26 +108,26 @@
 
   .additional-elements-inline {
     @apply flex flex-wrap items-start;
-    gap: theme(digitv2.spacers.spacer2);
+    gap: theme("digitv2.spacers.spacer2");
 
     .individualElement{
       h2{
-        margin: theme(digitv2.spacers.spacer0);
-        color: theme(digitv2.lightTheme.text-primary);
+        margin: theme("digitv2.spacers.spacer0");
+        color: theme("digitv2.lightTheme.text-primary");
       }
     }
   }
 
   .additional-elements-column {
     @apply flex flex-col items-start;
-    gap: theme(digitv2.spacers.spacer2);
+    gap: theme("digitv2.spacers.spacer2");
     
     .individualElement {
       @apply w-full max-w-full;
 
       h2{
-        margin: theme(digitv2.spacers.spacer0);
-        color: theme(digitv2.lightTheme.text-primary);
+        margin: theme("digitv2.spacers.spacer0");
+        color: theme("digitv2.lightTheme.text-primary");
       }
 
     }

package/src/digitv2/components/backLinkV2.scss

@@ -1,24 +1,27 @@
+@import './theme-variables.css';
+@import '../typography.scss';
+
 .digit-back-link {
-    gap: theme(digitv2.spacers.spacer1);
+    gap: theme("digitv2.spacers.spacer1");
     display: flex;
     align-items: center;
 
     .digit-back-link-icon {
         flex-shrink: 0;
-        width: theme(digitv2.spacers.spacer6);
-        height: theme(digitv2.spacers.spacer6);
+        width: theme("digitv2.spacers.spacer6");
+        height: theme("digitv2.spacers.spacer6");
         cursor: pointer;
 
         @media (max-width: 30rem) {
-            width: theme(digitv2.spacers.spacer5);
-            height: theme(digitv2.spacers.spacer5);
+            width: theme("digitv2.spacers.spacer5");
+            height: theme("digitv2.spacers.spacer5");
         }
 
     }
 
     .digit-back-link-label {
-        @extend .typography.body-l;
-        color: theme(digitv2.lightTheme.primary-2);
+        @include typography-body-l;
+        color: theme("digitv2.lightTheme.primary-2");
         margin-top:0.063rem;
         cursor: pointer;
     }
@@ -26,7 +29,7 @@
     &.disabled{
         pointer-events: none;
         .digit-back-link-label{
-            color: theme(digitv2.lightTheme.text-disabled);
+            color: theme("digitv2.lightTheme.text-disabled");
             cursor: default;
         }
 

package/src/digitv2/components/bodyContainerV2.scss

@@ -1,4 +1,5 @@
-@import url("../index.scss");
+@import './theme-variables.css';
+@import '../typography.scss';
 
 body {
   background-color: #fafafa;