pixel-react 1.0.2 → 1.0.4

package/lib/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/styleguide/colorpalette/colorpalette.stories.tsx","../src/styleguide/colorpalette/colorpalette.tsx","../src/styleguide/colorpalette/colorpalettelist.ts","../src/styleguide/colorpalette/index.ts","../src/styleguide/colorpalette/types.ts","../src/styleguide/typography/typography.stories.tsx","../src/styleguide/typography/typography.tsx","../src/styleguide/typography/typographylist.ts","../src/styleguide/typography/types.ts","../src/assets/utils/functionutils.ts","../src/components/accordion/accordion.stories.tsx","../src/components/accordion/accordion.tsx","../src/components/accordion/index.ts","../src/components/accordion/types.ts","../src/components/addresourcebutton/addbutton.stories.tsx","../src/components/addresourcebutton/addbutton.tsx","../src/components/addresourcebutton/index.ts","../src/components/addresourcebutton/type.ts","../src/components/addresourcebutton/arrowsbutton/arrowsbutton.tsx","../src/components/button/button.stories.tsx","../src/components/button/button.tsx","../src/components/button/index.ts","../src/components/button/types.ts","../src/components/charts/donutchart/donutchart.stories.tsx","../src/components/charts/donutchart/donutchart.tsx","../src/components/charts/donutchart/index.ts","../src/components/charts/donutchart/type.ts","../src/components/charts/radialchart/radialchart.stories.tsx","../src/components/charts/radialchart/radialchart.tsx","../src/components/charts/radialchart/index.ts","../src/components/charts/radialchart/types.ts","../src/components/checkbox/checkbox.stories.tsx","../src/components/checkbox/checkbox.tsx","../src/components/checkbox/index.ts","../src/components/checkbox/types.ts","../src/components/chip/chip.stories.tsx","../src/components/chip/chip.tsx","../src/components/chip/index.ts","../src/components/chip/types.ts","../src/components/drawer/drawer.stories.tsx","../src/components/drawer/drawer.tsx","../src/components/drawer/types.ts","../src/components/drawer/index.ts","../src/components/expandablemenu/expandablemenu.stories.tsx","../src/components/expandablemenu/expandablemenu.tsx","../src/components/expandablemenu/index.ts","../src/components/expandablemenu/types.ts","../src/components/filedropzone/dropzone.tsx","../src/components/filedropzone/filedropzone.stories.tsx","../src/components/filedropzone/filedropzone.tsx","../src/components/filedropzone/filepreview.tsx","../src/components/filedropzone/index.ts","../src/components/filedropzone/types.ts","../src/components/form/form.stories.tsx","../src/components/form/form.tsx","../src/components/form/index.ts","../src/components/form/types.ts","../src/components/gridlayout/gridlayout.stories.tsx","../src/components/gridlayout/gridlayout.tsx","../src/components/gridlayout/index.ts","../src/components/gridlayout/types.ts","../src/components/highlighttext/highlighttext.stories.tsx","../src/components/highlighttext/highlighttext.tsx","../src/components/highlighttext/index.ts","../src/components/highlighttext/types.ts","../src/components/icon/icon.stories.tsx","../src/components/icon/icon.tsx","../src/components/icon/iconlist.ts","../src/components/icon/index.ts","../src/components/icon/types.ts","../src/components/input/input.stories.tsx","../src/components/input/input.tsx","../src/components/input/index.ts","../src/components/input/types.ts","../src/components/inputwithdropdown/inputwithdropdown.stories.tsx","../src/components/inputwithdropdown/inputwithdropdown.tsx","../src/components/inputwithdropdown/index.ts","../src/components/inputwithdropdown/types.ts","../src/components/lazyload/lazyload.stories.tsx","../src/components/lazyload/lazyload.ts","../src/components/lazyload/lazyloading.tsx","../src/components/lazyload/index.ts","../src/components/menuoption/menuoption.stories.tsx","../src/components/menuoption/menuoption.tsx","../src/components/menuoption/index.ts","../src/components/menuoption/types.ts","../src/components/minimodal/minimodal.stories.tsx","../src/components/minimodal/minimodal.tsx","../src/components/minimodal/index.ts","../src/components/minimodal/types.ts","../src/components/multiselect/dropdown.tsx","../src/components/multiselect/multiselect.stories.tsx","../src/components/multiselect/multiselect.tsx","../src/components/multiselect/multiselecttypes.ts","../src/components/multiselect/dropdowntypes.ts","../src/components/multiselect/index.ts","../src/components/radiobutton/radiobutton.stories.tsx","../src/components/radiobutton/radiobutton.tsx","../src/components/radiobutton/index.ts","../src/components/radiobutton/radiobuttontypes.tsx","../src/components/radiogroup/radiogroup.stories.tsx","../src/components/radiogroup/radiogroup.tsx","../src/components/radiogroup/index.ts","../src/components/radiogroup/radiogrouptypes.tsx","../src/components/search/search.stories.tsx","../src/components/search/search.tsx","../src/components/search/index.ts","../src/components/search/types.ts","../src/components/select/select.stories.tsx","../src/components/select/select.tsx","../src/components/select/index.ts","../src/components/select/types.ts","../src/components/select/components/dropdown/dropdown.tsx","../src/components/select/components/dropdown/dropdowntypes.ts","../src/components/table/table.stories.tsx","../src/components/table/table.tsx","../src/components/table/types.ts","../src/components/table/index.ts","../src/components/tabletree/tabletree.stories.tsx","../src/components/tabletree/tabletree.tsx","../src/components/tabletree/data.ts","../src/components/tabletree/index.ts","../src/components/tabs/tabs.stories.tsx","../src/components/tabs/tabs.tsx","../src/components/tabs/index.ts","../src/components/tabs/types.ts","../src/components/textarea/textarea.stories.tsx","../src/components/textarea/textarea.tsx","../src/components/textarea/types.ts","../src/components/textarea/index.tsx","../src/components/themeprovider/themeprovider.tsx","../src/components/themeprovider/index.ts","../src/components/themeprovider/types.ts","../src/components/toast/toast.stories.tsx","../src/components/toast/toast.tsx","../src/components/toast/index.ts","../src/components/toast/types.ts","../src/components/toggle/toggle.stories.tsx","../src/components/toggle/toggle.tsx","../src/components/toggle/index.ts","../src/components/toggle/types.ts","../src/components/tooltip/tooltip.stories.tsx","../src/components/tooltip/tooltip.tsx","../src/components/tooltip/index.ts","../src/components/tooltip/types.ts","../src/components/typography/typography.stories.tsx","../src/components/typography/typography.tsx","../src/components/typography/index.ts","../src/components/typography/types.ts","../src/hooks/useclickoutside.tsx","../src/hooks/usefiledropzone.tsx","../src/hooks/useportalposition.tsx","../src/hooks/usetheme.tsx","../src/hooks/keyboardevents/useesckeyevent.tsx","../src/utils/tablecell/tablecell.ts","../src/utils/checkempty/checkempty.stories.tsx","../src/utils/checkempty/checkempty.ts","../src/utils/comparearrays/comparearrays.stories.tsx","../src/utils/comparearrays/comparearrays.ts","../src/utils/compareobjects/compareobjects.stories.tsx","../src/utils/compareobjects/compareobjects.ts","../src/utils/debounce/debounce.stories.tsx","../src/utils/debounce/debounce.ts","../src/utils/ffid/ffid.stories.tsx","../src/utils/ffid/ffid.ts","../src/utils/find/findandinsert.stories.tsx","../src/utils/find/findandinsert.ts","../src/utils/getextension/getextension.stories.tsx","../src/utils/getextension/getextension.ts","../src/utils/throttle/throttle.stories.tsx","../src/utils/throttle/throttle.ts","../src/utils/truncatetext/truncatetext.stories.tsx","../src/utils/truncatetext/truncatetext.ts"],"version":"5.6.3"}
+{"root":["../src/index.ts","../src/styleguide/colorpalette/colorpalette.stories.tsx","../src/styleguide/colorpalette/colorpalette.tsx","../src/styleguide/colorpalette/colorpalettelist.ts","../src/styleguide/colorpalette/index.ts","../src/styleguide/colorpalette/types.ts","../src/styleguide/typography/typography.stories.tsx","../src/styleguide/typography/typography.tsx","../src/styleguide/typography/typographylist.ts","../src/styleguide/typography/types.ts","../src/assets/utils/functionutils.ts","../src/components/accordion/accordion.stories.tsx","../src/components/accordion/accordion.tsx","../src/components/accordion/index.ts","../src/components/accordion/types.ts","../src/components/addbutton/addbutton.stories.tsx","../src/components/addbutton/addbutton.tsx","../src/components/addbutton/index.ts","../src/components/addbutton/types.ts","../src/components/addresourcebutton/addbutton.stories.tsx","../src/components/addresourcebutton/addbutton.tsx","../src/components/addresourcebutton/index.ts","../src/components/addresourcebutton/type.ts","../src/components/addresourcebutton/arrowsbutton/arrowsbutton.tsx","../src/components/button/button.stories.tsx","../src/components/button/button.tsx","../src/components/button/index.ts","../src/components/button/types.ts","../src/components/charts/donutchart/donutchart.stories.tsx","../src/components/charts/donutchart/donutchart.tsx","../src/components/charts/donutchart/index.ts","../src/components/charts/donutchart/type.ts","../src/components/charts/radialchart/radialchart.stories.tsx","../src/components/charts/radialchart/radialchart.tsx","../src/components/charts/radialchart/index.ts","../src/components/charts/radialchart/types.ts","../src/components/checkbox/checkbox.stories.tsx","../src/components/checkbox/checkbox.tsx","../src/components/checkbox/index.ts","../src/components/checkbox/types.ts","../src/components/chip/chip.stories.tsx","../src/components/chip/chip.tsx","../src/components/chip/index.ts","../src/components/chip/types.ts","../src/components/drawer/drawer.stories.tsx","../src/components/drawer/drawer.tsx","../src/components/drawer/types.ts","../src/components/drawer/index.ts","../src/components/expandablemenu/expandablemenu.stories.tsx","../src/components/expandablemenu/expandablemenu.tsx","../src/components/expandablemenu/index.ts","../src/components/expandablemenu/types.ts","../src/components/filedropzone/dropzone.tsx","../src/components/filedropzone/filedropzone.stories.tsx","../src/components/filedropzone/filedropzone.tsx","../src/components/filedropzone/filepreview.tsx","../src/components/filedropzone/index.ts","../src/components/filedropzone/types.ts","../src/components/form/form.stories.tsx","../src/components/form/form.tsx","../src/components/form/index.ts","../src/components/form/types.ts","../src/components/gridlayout/gridlayout.stories.tsx","../src/components/gridlayout/gridlayout.tsx","../src/components/gridlayout/index.ts","../src/components/gridlayout/types.ts","../src/components/highlighttext/highlighttext.stories.tsx","../src/components/highlighttext/highlighttext.tsx","../src/components/highlighttext/index.ts","../src/components/highlighttext/types.ts","../src/components/icon/icon.stories.tsx","../src/components/icon/icon.tsx","../src/components/icon/iconlist.ts","../src/components/icon/index.ts","../src/components/icon/types.ts","../src/components/input/input.stories.tsx","../src/components/input/input.tsx","../src/components/input/index.ts","../src/components/input/types.ts","../src/components/inputwithdropdown/inputwithdropdown.stories.tsx","../src/components/inputwithdropdown/inputwithdropdown.tsx","../src/components/inputwithdropdown/index.ts","../src/components/inputwithdropdown/types.ts","../src/components/lazyload/lazyload.stories.tsx","../src/components/lazyload/lazyload.ts","../src/components/lazyload/lazyloading.tsx","../src/components/lazyload/index.ts","../src/components/menuoption/menuoption.stories.tsx","../src/components/menuoption/menuoption.tsx","../src/components/menuoption/index.ts","../src/components/menuoption/types.ts","../src/components/minimodal/minimodal.stories.tsx","../src/components/minimodal/minimodal.tsx","../src/components/minimodal/index.ts","../src/components/minimodal/types.ts","../src/components/multiselect/dropdown.tsx","../src/components/multiselect/multiselect.stories.tsx","../src/components/multiselect/multiselect.tsx","../src/components/multiselect/multiselecttypes.ts","../src/components/multiselect/dropdowntypes.ts","../src/components/multiselect/index.ts","../src/components/radiobutton/radiobutton.stories.tsx","../src/components/radiobutton/radiobutton.tsx","../src/components/radiobutton/index.ts","../src/components/radiobutton/radiobuttontypes.tsx","../src/components/radiogroup/radiogroup.stories.tsx","../src/components/radiogroup/radiogroup.tsx","../src/components/radiogroup/index.ts","../src/components/radiogroup/radiogrouptypes.tsx","../src/components/search/search.stories.tsx","../src/components/search/search.tsx","../src/components/search/index.ts","../src/components/search/types.ts","../src/components/select/select.stories.tsx","../src/components/select/select.tsx","../src/components/select/index.ts","../src/components/select/types.ts","../src/components/select/components/dropdown/dropdown.tsx","../src/components/select/components/dropdown/dropdowntypes.ts","../src/components/statedropdown/statedropdown.stories.tsx","../src/components/statedropdown/statedropdown.tsx","../src/components/statedropdown/statedropdowntypes.tsx","../src/components/statedropdown/index.ts","../src/components/statusbutton/statusbutton.stories.tsx","../src/components/statusbutton/statusbutton.tsx","../src/components/statusbutton/index.ts","../src/components/statusbutton/types.ts","../src/components/table/table.stories.tsx","../src/components/table/table.tsx","../src/components/table/types.ts","../src/components/table/index.ts","../src/components/tabletree/tabletree.stories.tsx","../src/components/tabletree/tabletree.tsx","../src/components/tabletree/data.ts","../src/components/tabletree/index.ts","../src/components/tabs/tabs.stories.tsx","../src/components/tabs/tabs.tsx","../src/components/tabs/index.ts","../src/components/tabs/types.ts","../src/components/textarea/textarea.stories.tsx","../src/components/textarea/textarea.tsx","../src/components/textarea/types.ts","../src/components/textarea/index.tsx","../src/components/themeprovider/themeprovider.tsx","../src/components/themeprovider/index.ts","../src/components/themeprovider/types.ts","../src/components/toast/toast.stories.tsx","../src/components/toast/toast.tsx","../src/components/toast/index.ts","../src/components/toast/types.ts","../src/components/toggle/toggle.stories.tsx","../src/components/toggle/toggle.tsx","../src/components/toggle/index.ts","../src/components/toggle/types.ts","../src/components/tooltip/tooltip.stories.tsx","../src/components/tooltip/tooltip.tsx","../src/components/tooltip/index.ts","../src/components/tooltip/types.ts","../src/components/typography/typography.stories.tsx","../src/components/typography/typography.tsx","../src/components/typography/index.ts","../src/components/typography/types.ts","../src/hooks/useclickoutside.tsx","../src/hooks/usefiledropzone.tsx","../src/hooks/useportalposition.tsx","../src/hooks/usetheme.tsx","../src/hooks/keyboardevents/useesckeyevent.tsx","../src/utils/tablecell/tablecell.ts","../src/utils/checkempty/checkempty.stories.tsx","../src/utils/checkempty/checkempty.ts","../src/utils/comparearrays/comparearrays.stories.tsx","../src/utils/comparearrays/comparearrays.ts","../src/utils/compareobjects/compareobjects.stories.tsx","../src/utils/compareobjects/compareobjects.ts","../src/utils/debounce/debounce.stories.tsx","../src/utils/debounce/debounce.ts","../src/utils/ffid/ffid.stories.tsx","../src/utils/ffid/ffid.ts","../src/utils/find/findandinsert.stories.tsx","../src/utils/find/findandinsert.ts","../src/utils/getextension/getextension.stories.tsx","../src/utils/getextension/getextension.ts","../src/utils/throttle/throttle.stories.tsx","../src/utils/throttle/throttle.ts","../src/utils/truncatetext/truncatetext.stories.tsx","../src/utils/truncatetext/truncatetext.ts"],"version":"5.6.3"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/StyleGuide/ColorPalette/ColorPalette.scss

@@ -1,16 +1,15 @@
-@import '../../assets/styles/colors';
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .ff-style-guide {
   border-radius: 12px;
 
   .style-guide-header {
-    background-color: $brand-color;
+    background-color: var(--brand-color);
     height: 100px;
     padding: 40px;
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
-    color: $tooltip-text-color;
+    color: var(--tooltip-text-color);
 
     & div {
       @extend .font-size-32;
@@ -51,7 +50,7 @@
       .color-code {
         @extend .fontSm;
         font-weight: 400;
-        color: $text-color;
+        color: var(--text-color);
       }
     }
   }

package/src/StyleGuide/Typography/Typography.scss

@@ -1,5 +1,4 @@
-@import '../../assets/styles/colors';
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .typography-container {
   .typography-header {
@@ -10,7 +9,7 @@
     & span {
       @extend .fontSm;
       font-weight: 400;
-      color: $tooltip-bg-color; // need to change color #7A7A7A
+      color: var(--tooltip-bg-color); // need to change color #7A7A7A
     }
   }
 }
@@ -30,7 +29,7 @@
   width: 60%;
   display: flex;
   flex-direction: column;
-  border-right: 1px solid $border-color;
+  border-right: 1px solid var(--border-color);
   padding: 10px;
   gap: 10px;
 
@@ -93,7 +92,7 @@
       .font-size {
         @extend .fontLg;
         font-weight: 400;
-        color: $tooltip-bg-color;
+        color: var(--tooltip-bg-color);
       }
     }
   }

package/src/assets/Themes/BaseTheme.scss

@@ -2,11 +2,13 @@ $base-theme: (
   brand-color: #71347b,
   text-color: #1e161f,
   description-text: #7a7a7a,
+  click-able-text-color: #71347b,
+  icons-default-color: #71347b,
   border-color: #f0e7f4,
   disable-color: #71347b80,
   hover-color: #f7ebff,
-  pop-up-background-blur: #00000080,
-  slider-table-color: #efe1f9,
+  pop-up-background-blur: #14041c1a,
+  slider-table-color: #d4b0e426,
   drawer-footer-bg: #ffffff,
   drawer-footer-border: #f0e7f4,
   text-bg-highlight: #f5fb00,
@@ -21,8 +23,16 @@ $base-theme: (
   add-icon-hover-color: #431b4a,
   arrow-button-bg-color: #ffffff,
   arrows-button-border-color: #ded1e5,
+  overlay-bg: #1e161f1a,
   chip-fill-color: #f9d5ff,
   chip-text-color: #1e161f,
+  file-drop-zone-default-fill-color: #71347b1a,
+  file-drop-zone-default-text-color: #1e161f,
+  file-drop-zone-selected-fill-color: #71347b33,
+  file-drop-zone-selected-text-color: #1e161f,
+  icon-color: #71347b,
+  default-icon-color: #a3a3a3,
+  tree-connecting-lines-color: #d7b5e3,
   primary-button-color:
     linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%),
   primary-button-hover:
@@ -51,17 +61,7 @@ $base-theme: (
   error_light: #e42525,
   ff-success: #079455,
   ff-warning: #f79009,
-  status-success-text-color: #016102,
-  status-warning-text-color: #ff8b00,
-  status-rejected-text-color: #c60202,
-  status-skipped-text-color: #3c3838,
-  status-success-bg-color: #c6efcd,
-  status-warning-bg-color: #ffe380,
-  status-rejected-bg-color: #f7d9d9,
-  status-skipped-bg-color: #c4c3c3,
-  status-warning-hover-bg-color: #fcd8ac,
-  status-percentage-growth-bg-color: #ecedf8,
-  default-icon-color: #a3a3a3,
+
   expandable-menu-default-bg: #fdfaff,
   expandable-menu-option-bg: #610b861a,
   file-dropzone-default-color: #71347b1a,
@@ -71,7 +71,6 @@ $base-theme: (
   ff-mini-modal-border: #ffffff,
   ff-mini-modal-box-shadow: #3713553d,
   ff-mini-modal-footer-background: #aeb0c0,
-
   input-default-border-color: #a3a3a3,
   input-hover-border-color: #1e161f,
   input-default-label-color: #747474,
@@ -83,7 +82,6 @@ $base-theme: (
   tabs-border-color: #f1ebf2,
   tabs-bg-color: #ede6f2,
   tab-bg-color: #ffffff,
-
   toast-close-icon-wrapper-bg: #fafafa,
   toaster-boxshadow: #1e161f3d,
   toaster-success-border: linear-gradient(#07945566, #00693a66),
@@ -104,7 +102,35 @@ $base-theme: (
   menu-option-icon-color: #ffffff,
   menu-option-icon-clicked: #71347b,
   delete-text-color: #c50303,
-  tree-connecting-lines-color: #d7b5e3,
+
+  status-success-bg-color: #c6efcd,
+  status-success-text-color: #016102,
+  status-warning-bg-color: #ffe380,
+  status-warning-text-color: #ff8b00,
+  status-rejected-bg-color: #f7d9d9,
+  status-rejected-text-color: #c60202,
+  status-skipped-bg-color: #c4c3c3,
+  status-warning-hover-bg-color: #fcd8ac,
+  status-percentage-growth-bg-color: #ecedf8,
+  
+  status-button-bg-passed: #c6efcd,
+  status-button-bg-failed: #f7d9d9,
+  status-button-bg-running: #ecedf8,
+  status-button-bg-skipped: #c4c3c3,
+  status-button-bg-warning: #ffb803,
+  status-button-bg-terminated: #f7d9d9,
+  status-button-bg-partiallyExecuted: #dee7f1,
+  status-button-bg-aborted: #f7d9d9,
+  status-button-bg-notExecuted: #f7d9d9,
+  status-button-text-passed: #016102,
+  status-button-text-failed: #c50303,
+  status-button-text-running: #434db8,
+  status-button-text-skipped: #3c3838,
+  status-button-text-warning: #ffffff,
+  status-button-text-terminated: #c50303,
+  status-button-text-partiallyExecuted: #0d69d4,
+  status-button-text-aborted: #c50303,
+  status-button-text-notExecuted: #c50303,
 
   // TODO:: Need to change the color code values of below 7 color (N/A in DS)
   ff-select-option-border-color: #ded1e5,
@@ -122,6 +148,9 @@ $base-theme: (
   ff-search-filed-clear-text: #71347b,
   ff-search-filed-placeholder-text: #a3a3a3,
   ff-search-filed-close-Icon: #14041c,
+
+  primary-icon-color: #ffffff,
+  secondary-icon-color: #71347b,
 );
 :root {
   @each $key, $value in $base-theme {

package/src/assets/Themes/DarkTheme.scss

@@ -2,26 +2,36 @@ $dark-theme: (
   brand-color: #71347b,
   text-color: #e8e0e9,
   description-text: #d9d9d9,
+  click-able-text-color: #e8e0e9,
+  icons-default-color: #e8e0e9,
   border-color: #333234,
   disable-color: #71347b80,
   hover-color: #f7ebff,
   pop-up-background-blur: #12121299,
   slider-table-color: #272428,
-  drawer-footer-bg: #1b181c,
+  drawer-footer-bg: #1b181c99,
   drawer-footer-border: #333234,
   text-bg-highlight: #f5fb00,
   tooltip-bg-color: #2a2a2a,
   tooltip-text-color: #ffffff,
-  toggle-strip-color: #272940,
-  toggle-strip-active: #71347b,
+  toggle-strip-color: #cfd1e2,
+  toggle-strip-active-color: #71347b,
   toggle-strip-shadow: #00000040,
   toggle-button-bg-color: #ffffff,
   toggle-disable-icon-color: #767994,
+  text-area-default-color: #747474,
   add-icon-hover-color: #431b4a,
   arrow-button-bg-color: #ffffff,
   arrows-button-border-color: #ded1e5,
+  overlay-bg: #12121299,
   chip-fill-color: #f9d5ff,
   chip-text-color: #1e161f,
+  file-drop-zone-default-fill-color: #71347b1a,
+  file-drop-zone-default-text-color: #1e161f,
+  file-drop-zone-selected-fill-color: #71347b33,
+  file-drop-zone-selected-text-color: #1e161f,
+  icon-color: #71347b,
+  tree-connecting-lines-color: #d7b5e3,
   primary-button-color:
     linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%),
   primary-button-hover:
@@ -53,6 +63,12 @@ $dark-theme: (
   delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%),
   delete-button-disable:
     linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%),
+  drawer-title-color: #252c37,
+  toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%),
+  error_light: #e42525,
+  ff-success: #079455,
+  ff-warning: #f79009,
+
   // TODO:: Need to change the color code values of below 7 color (N/A in DS)
   default-icon-color: #a3a3a3,
   expandable-menu-default-bg: #fdfaff,
@@ -64,7 +80,6 @@ $dark-theme: (
   ff-mini-modal-border: #ffffff,
   ff-mini-modal-box-shadow: #3713553d,
   ff-mini-modal-footer-background: #aeb0c0,
-
   input-default-border-color: #a3a3a3,
   input-hover-border-color: #1e161f,
   input-default-label-color: #747474,
@@ -89,24 +104,44 @@ $dark-theme: (
   checkbox-partial-color: #ffffff,
   checkbox-hover-color: #f7edff,
   multi-select-border: #a3a3a380,
-  text-color-light: #1e161f80,
   multi-select-label-bg: #ffffff,
+  text-color-light: #1e161f80,
   radio-button-border: #b5b5b5,
   radio-button-hover: #d3d3d3,
-  tree-connecting-lines-color: #d7b5e3,
   menu-option-icon-color: #ffffff,
   menu-option-icon-clicked: #71347b,
   delete-text-color: #c50303,
-  status-success-text-color: #016102,
-  status-warning-text-color: #ff8b00,
-  status-rejected-text-color: #c60202,
-  status-skipped-text-color: #3c3838,
+
   status-success-bg-color: #c6efcd,
+  status-success-text-color: #016102,
   status-warning-bg-color: #ffe380,
+  status-warning-text-color: #ff8b00,
   status-rejected-bg-color: #f7d9d9,
+  status-rejected-text-color: #c60202,
   status-skipped-bg-color: #c4c3c3,
+  status-warning-hover-bg-color: #fcd8ac,
   status-percentage-growth-bg-color: #ecedf8,
 
+  status-button-bg-passed: #c6efcd,
+  status-button-bg-failed: #f7d9d9,
+  status-button-bg-running: #ecedf8,
+  status-button-bg-skipped: #c4c3c3,
+  status-button-bg-warning: #ffb803,
+  status-button-bg-terminated: #f7d9d9,
+  status-button-bg-partiallyExecuted: #dee7f1,
+  status-button-bg-aborted: #f7d9d9,
+  status-button-bg-notExecuted: #f7d9d9,
+  status-button-text-passed: #016102,
+  status-button-text-failed: #c50303,
+  status-button-text-running: #434db8,
+  status-button-text-skipped: #3c3838,
+  status-button-text-warning: #ffffff,
+  status-button-text-terminated: #c50303,
+  status-button-text-partiallyExecuted: #0d69d4,
+  status-button-text-aborted: #c50303,
+  status-button-text-notExecuted: #c50303,
+
+
   // TODO:: Need to change the color code values of below 10 color (N/A in DS)
   ff-select-option-border-color: #ded1e5,
   ff-select-option-wrapper-box-shadow: #592f7c33,
@@ -123,6 +158,9 @@ $dark-theme: (
   ff-search-filed-clear-text: #71347b,
   ff-search-filed-placeholder-text: #a3a3a3,
   ff-search-filed-close-Icon: #14041c,
+
+  primary-icon-color: #ffffff,
+  secondary-icon-color: #71347b,
 );
 :root {
   @each $key, $value in $dark-theme {

package/src/assets/Themes/Theme.scss

@@ -1,200 +1,16 @@
-@import './BaseTheme.scss';
-@import './DarkTheme.scss';
+@use './BaseTheme' as base;
+@use './DarkTheme' as dark;
 
 @mixin set-theme-variables($theme-map) {
-  --brand-color: #{map-get($theme-map, brand-color)};
-  --text-color: #{map-get($theme-map, text-color)};
-  --description-text: #{map-get($theme-map, description-text)};
-  --border-color: #{map-get($theme-map, border-color)};
-  --disable-color: #{map-get($theme-map, disable-color)};
-  --hover-color: #{map-get($theme-map, hover-color)};
-  --pop-up-background-blur: #{map-get($theme-map, pop-up-background-blur)};
-  --slider-table-color: #{map-get($theme-map, slider-table-color)};
-  --drawer-footer-bg: #{map-get($theme-map, drawer-footer-bg)};
-  --drawer-footer-border: #{map-get($theme-map, drawer-footer-border)};
-  --text-bg-highlight: #{map-get($theme-map, text-bg-highlight)};
-  --tooltip-bg-color: #{map-get($theme-map, tooltip-bg-color)};
-  --tooltip-text-color: #{map-get($theme-map, tooltip-text-color)};
-  --toggle-strip-color: #{map-get($theme-map, toggle-strip-color)};
-  --toggle-strip-active: #{map-get($theme-map, toggle-strip-active)};
-  --toggle-strip-shadow: #{map-get($theme-map, toggle-strip-shadow)};
-  --toggle-button-bg-color: #{map-get($theme-map, toggle-button-bg-color)};
-  --toggle-disable-icon-color: #{map-get($theme-map, toggle-disable-icon-color)};
-  --chip-fill-color: #{map-get($theme-map, chip-fill-color)};
-  --chip-text-color: #{map-get($theme-map, chip-text-color)};
-  --primary-button-color: #{map-get($theme-map, primary-button-color)};
-  --primary-button-hover: #{map-get($theme-map, primary-button-hover)};
-  --primary-button-disable: #{map-get($theme-map, primary-button-disable)};
-  --primary-button-text-color: #{map-get($theme-map, primary-button-text-color)};
-  --primary-button-border: #{map-get($theme-map, primary-button-border)};
-  --secondary-button-color-text: #{map-get(
-      $theme-map,
-      secondary-button-color-text
-    )};
-  --secondary-button-border: #{map-get($theme-map, secondary-button-border)};
-  --secondary-button-text-color: #{map-get(
-      $theme-map,
-      secondary-button-text-color
-    )};
-  --secondary-button-hover: #{map-get($theme-map, secondary-button-hover)};
-  --tertiary-button-color: #{map-get($theme-map, tertiary-button-color)};
-  --tertiary-button-hover: #{map-get($theme-map, tertiary-button-hover)};
-  --delete-button-color: #{map-get($theme-map, delete-button-color)};
-  --delete-button-border: #{map-get($theme-map, delete-button-border)};
-  --delete-button-hover: #{map-get($theme-map, delete-button-hover)};
-  --delete-button-disable: #{map-get($theme-map, delete-button-disable)};
-  --add-icon-hover-color: #{map-get($theme-map, add-icon-hover-color)};
-  --arrow-button-bg-color: #{map-get($theme-map, arrow-button-bg-color)};
-  --arrows-button-border-color: #{map-get(
-      $theme-map,
-      arrows-button-border-color
-    )};
-  --add-icon-hover-color: #{map-get($theme-map, add-icon-hover-color)};
-  --arrow-button-bg-color: #{map-get($theme-map, arrow-button-bg-color)};
-  --arrows-button-border-color: #{map-get(
-      $theme-map,
-      arrows-button-border-color
-    )};
-  --default-icon-color: #{map-get($theme-map, default-icon-color)};
-  --error_light: #{map-get($theme-map, error_light)};
-  --text-area-default-color: #{map-get($theme-map, text-area-default-color)};
-  --expandable-menu-default-bg: #{map-get(
-      $theme-map,
-      expandable-menu-default-bg
-    )};
-  --expandable-menu-option-bg: #{map-get($theme-map, expandable-menu-option-bg)};
-  --file-dropzone-default-color: #{map-get(
-      $theme-map,
-      file-dropzone-default-color
-    )};
-  --file-dropzone-selected-color: #{map-get(
-      $theme-map,
-      file-dropzone-selected-color
-    )};
-  --file-details-container-shadow: #{map-get(
-      $theme-map,
-      file-details-container-shadow
-    )};
-  --file-details-bg: #{map-get($theme-map, file-details-bg)};
-  --ff-mini-modal-border: #{map-get($theme-map, ff-mini-modal-border)};
-  --ff-mini-modal-box-shadow: #{map-get($theme-map, ff-mini-modal-box-shadow)};
-  --ff-mini-modal-footer-background: #{map-get(
-      $theme-map,
-      ff-mini-modal-footer-background
-    )};
-
-  --input-default-border-color: #{map-get(
-      $theme-map,
-      input-default-border-color
-    )};
-  --input-hover-border-color: #{map-get($theme-map, input-hover-border-color)};
-  --input-default-label-color: #{map-get($theme-map, input-default-label-color)};
-  --input-label-bg-color: #{map-get($theme-map, input-label-bg-color)};
-  --input-active-text-color: #{map-get($theme-map, input-active-text-color)};
-  --input-error-text-color: #{map-get($theme-map, input-error-text-color)};
-  --tabs-label-default-color: #{map-get($theme-map, tabs-label-default-color)};
-  --tabs-label-active-color: #{map-get($theme-map, tabs-label-active-color)};
-  --tabs-border-color: #{map-get($theme-map, tabs-border-color)};
-  --tabs-bg-color: #{map-get($theme-map, tabs-bg-color)};
-  --tab-bg-color: #{map-get($theme-map, tab-bg-color)};
-  --option-card-border-color: #{map-get($theme-map, option-card-border-color)};
-  --option-card-bg-color: #{map-get($theme-map, option-card-bg-color)};
-  --checkbox-bg-color: #{map-get($theme-map, checkbox-bg-color)};
-  --checkbox-border-color: #{map-get($theme-map, checkbox-border-color)};
-  --checkbox-partial-color: #{map-get($theme-map, checkbox-partial-color)};
-  --checkbox-hover-color: #{map-get($theme-map, checkbox-hover-color)};
-  --multi-select-border: #{map-get($theme-map, multi-select-border)};
-  --text-color-light: #{map-get($theme-map, text-color-light)};
-  --multi-select-label-bg: #{map-get($theme-map, multi-select-label-bg)};
-  --radio-button-border: #{map-get($theme-map, radio-button-border)};
-  --radio-button-hover: #{map-get($theme-map, radio-button-hover)};
-  --tree-connecting-lines-color: #{map-get(
-      $theme-map,
-      tree-connecting-lines-color
-    )};
-  --menu-option-icon-color: #{map-get($theme-map, menu-option-icon-color)};
-  --menu-option-icon-clicked: #{map-get($theme-map, menu-option-icon-clicked)};
-  --delete-text-color: #{map-get($theme-map, delete-text-color)};
-  --status-success-text-color: #{map-get($theme-map, status-success-text-color)};
-  --status-warning-text-color: #{map-get($theme-map, status-warning-text-color)};
-  --status-rejected-text-color: #{map-get(
-      $theme-map,
-      status-rejected-text-color
-    )};
-  --status-skipped-text-color: #{map-get($theme-map, status-skipped-text-color)};
-  --status-success-bg-color: #{map-get($theme-map, status-success-bg-color)};
-  --status-warning-bg-color: #{map-get($theme-map, status-warning-bg-color)};
-  --status-rejected-bg-color: #{map-get($theme-map, status-rejected-bg-color)};
-  --status-skipped-bg-color: #{map-get($theme-map, status-skipped-bg-color)};
-  --status-percentage-growth-bg-color: #{map-get(
-      $theme-map,
-      status-percentage-growth-bg-color
-    )};
-
-  // Select Dropdown Color
-  --ff-select-option-border-color: #{map-get(
-      $theme-map,
-      ff-select-option-border-color
-    )};
-  --ff-select-option-wrapper-box-shadow: #{map-get(
-      $theme-map,
-      ff-select-option-wrapper-box-shadow
-    )};
-  --ff-select-background-color: #{map-get(
-      $theme-map,
-      ff-select-background-color
-    )};
-  --ff-select-scroll-thumb-color: #{map-get(
-      $theme-map,
-      ff-select-scroll-thumb-color
-    )};
-  --ff-select-scroll-track-bg: #{map-get($theme-map, ff-select-scroll-track-bg)};
-  --ff-select-scroll-thumb-hover: #{map-get(
-      $theme-map,
-      ff-select-scroll-thumb-hover
-    )};
-  --ff-select-text-color: #{map-get($theme-map, ff-select-text-color)};
-  --ff-select-option-hover-color: #{map-get(
-      $theme-map,
-      ff-select-option-hover-color
-    )};
-  --ff-select-default-color: #{map-get($theme-map, ff-select-default-color)};
-  --ff-select-border-color: #{map-get($theme-map, ff-select-border-color)};
-  --ff-select-brand-color: #{map-get($theme-map, ff-select-brand-color)};
-  --ff-select-text-hover-color: #{map-get(
-      $theme-map,
-      ff-select-text-hover-color
-    )};
-  --toaster-boxshadow: #{map-get($theme-map, toaster-boxshadow)};
-  --toast-close-icon-wrapper-bg: #{map-get(
-      $theme-map,
-      toast-close-icon-wrapper-bg
-    )};
-  --toaster-success-border: #{map-get($theme-map, toaster-success-border)};
-  --toaster-warning-border: #{map-get($theme-map, toaster-warning-border)};
-  --toaster-info-border: #{map-get($theme-map, toaster-info-border)};
-  --toaster-danger_confirm-border: #{map-get(
-      $theme-map,
-      toaster-danger_confirm-border
-    )};
-  --ff-search-filed-clear-text: #{map-get(
-      $theme-map,
-      ff-search-filed-clear-text
-    )};
-  --ff-search-filed-placeholder-text: #{map-get(
-      $theme-map,
-      ff-search-filed-placeholder-text
-    )};
-  --ff-search-filed-close-Icon: #{map-get(
-      $theme-map,
-      ff-search-filed-close-Icon
-    )};
+  @each $key, $value in $theme-map {
+    --#{$key}: #{$value};
+  }
 }
 
 .ff-light-theme {
-  @include set-theme-variables($base-theme);
+  @include set-theme-variables(base.$base-theme);
 }
 
 .ff-dark-theme {
-  @include set-theme-variables($dark-theme);
+  @include set-theme-variables(dark.$dark-theme);
 }

package/src/assets/icons/active_license_icon.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.867 6.20329C15.873 6.44806 15.6805 6.65267 15.4358 6.65874C15.191 6.6648 14.9864 6.47232 14.9803 6.22754C14.9614 5.5887 14.7704 4.99913 14.4362 4.50352C14.1035 4.01018 13.6268 3.6093 13.0373 3.34938L9.25273 1.6784C8.81623 1.48592 8.37519 1.38891 7.93489 1.38891C7.49459 1.38891 7.05355 1.48516 6.61705 1.6784L2.8325 3.34938C2.22626 3.61688 1.73974 4.03216 1.4063 4.54368C1.07285 5.0552 0.890218 5.66903 0.890218 6.33212V10.8867C0.890218 12.5144 1.66622 13.9633 2.70367 15.1729C3.76613 16.4127 5.10752 17.4047 6.18965 18.0912C6.73527 18.4368 7.33242 18.6111 7.92579 18.6126C8.52294 18.6141 9.12087 18.4436 9.66801 18.1018C9.87489 17.9722 10.1485 18.0351 10.2788 18.2428C10.4084 18.4497 10.3455 18.7232 10.1378 18.8536C9.44672 19.2863 8.68663 19.5023 7.92663 19.5C7.16276 19.4977 6.40191 19.2787 5.71387 18.843C4.57715 18.1223 3.16452 17.075 2.02943 15.751C0.868459 14.3975 0 12.7591 0 10.8874V6.33289C0 5.49627 0.234914 4.71724 0.663091 4.06096C1.09049 3.4047 1.70887 2.87423 2.47579 2.53624L6.26033 0.865263C6.81203 0.62125 7.37356 0.5 7.93661 0.5C8.49965 0.5 9.06045 0.622008 9.61288 0.865263L13.3974 2.53624C14.1439 2.86588 14.7494 3.37589 15.1753 4.0079C15.6004 4.63916 15.8452 5.39166 15.8687 6.20553L15.867 6.20329ZM10.8191 12.7675C10.6448 12.5932 10.6448 12.312 10.8191 12.1377C10.9934 11.9634 11.2745 11.9634 11.4488 12.1377L12.5408 13.229L14.8242 10.9456C14.9985 10.7713 15.2797 10.7713 15.454 10.9456C15.6282 11.1199 15.6282 11.401 15.454 11.5753L12.8561 14.1732C12.6818 14.3475 12.4006 14.3475 12.2264 14.1732L10.8199 12.7667L10.8191 12.7675ZM13.1356 7.7159C14.4732 7.7159 15.6842 8.25775 16.5609 9.13453C17.4377 10.0113 17.9795 11.2224 17.9795 12.5598C17.9795 13.8972 17.4369 15.1084 16.5609 15.985C15.6841 16.8618 14.4731 17.4037 13.1356 17.4037C11.7981 17.4037 10.5871 16.8618 9.71038 15.985C8.83359 15.1083 8.29175 13.8972 8.29175 12.5598C8.29175 11.2224 8.83435 10.0112 9.71038 9.13453C10.5872 8.25775 11.7982 7.7159 13.1356 7.7159ZM15.9312 9.76435C15.2158 9.04897 14.2276 8.6064 13.1356 8.6064C12.0436 8.6064 11.0554 9.04895 10.3401 9.76435C9.62482 10.4797 9.18215 11.4679 9.18215 12.5599C9.18215 13.6519 9.62471 14.6401 10.3401 15.3554C11.0555 16.0707 12.0436 16.5134 13.1356 16.5134C14.2276 16.5134 15.2159 16.0708 15.9312 15.3554C16.6464 14.64 17.0891 13.6519 17.0891 12.5599C17.0891 11.4679 16.6466 10.4796 15.9312 9.76435Z" fill="currentColor"/>
+</svg>