pixel-react 1.0.2 → 1.0.3

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/components/Accordion/Accordion.scss

@@ -1,5 +1,4 @@
-@import '../../assets/styles/colors';
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .ff-accordion {
   border: 1px solid var(--border-color);

package/src/components/Button/Button.scss

@@ -1,5 +1,5 @@
 @use '../../assets/styles/colors' as *;
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .ff-button {
   width: auto;

package/src/components/Charts/DonutChart/DonutChart.scss

@@ -1,4 +1,4 @@
-@import '../../../assets/styles/fonts';
+@use '../../../assets/styles/fonts';
 .ff-donut-chart-section {
   display: flex;
   align-items: center;

package/src/components/Charts/RadialChart/RadialChart.scss

@@ -1,4 +1,4 @@
-@import '../../../assets/styles/fonts';
+@use '../../../assets/styles/fonts';
 
 .ff-radial-chart-container {
   cursor: pointer;

package/src/components/Drawer/Drawer.scss

@@ -1,11 +1,10 @@
-@import '../../assets/styles/colors';
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .ff-drawer-container {
   .ff-overlay {
     position: fixed;
     inset: 0;
-    background-color: $drawer-title-color;
+    background-color: var(--drawer-title-color);
     opacity: 0.5;
   }
 
@@ -16,7 +15,7 @@
     top: 0;
     bottom: 0;
     min-width: 450px;
-    background-color: $primary-button-text-color;
+    background-color: var(--primary-button-text-color);
     z-index: 999;
     transform: translateX(100%);
     opacity: 0;
@@ -43,19 +42,19 @@
     &--x-large {
       transition: all 0.4s ease-in-out;
       border-radius: 5px;
-      border: 2px solid $border-color;
+      border: 2px solid var(--border-color);
     }
 
     .ff-drawer-header {
       padding: 10px 8px 10px 8px;
       display: flex;
       gap: 10px;
-      border-bottom: 2px solid $border-color;
+      border-bottom: 2px solid var(--border-color);
 
       .ff-drawer-title {
         @extend .fontSm;
         font-weight: 600;
-        color: $drawer-title-color;
+        color: var(--drawer-title-color);
         display: flex;
         align-items: center;
         gap: 12px;
@@ -75,7 +74,7 @@
 
           .ff-expand-collapse-button {
             cursor: pointer;
-            background-color: $button-bg-color;
+            background-color: var(--button-bg-color);
             outline: none;
             border: none;
             margin: 0;
@@ -91,7 +90,7 @@
     }
 
     .ff-drawer-body {
-      background-color: $drawer-footer-bg;
+      background-color: var(--drawer-footer-bg);
       padding: 8px;
       height: calc(100vh - 76px);
       overflow: hidden auto;
@@ -109,7 +108,7 @@
       padding: 5px 16px 5px 16px;
       display: flex;
       justify-content: space-between;
-      border-top: 2px solid $drawer-footer-border;
+      border-top: 2px solid var(--drawer-footer-border);
 
       .button-container {
         display: flex;

package/src/components/ExpandableMenu/ExpandableMenu.scss

@@ -1,4 +1,4 @@
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .ff-expandable-chip-menu {
   display: inline-flex;

package/src/components/Icon/Icons.scss

@@ -1,4 +1,3 @@
-@import '../../assets/styles/colors';
 
 .ff-icon-container {
   display: flex;
@@ -12,10 +11,10 @@
   box-sizing: content-box;
   &:hover {
     border-radius: 50%;
-    background-color: $drawer-footer-bg;
-    box-shadow: 0px 0px 16px $toggle-strip-shadow;
+    background-color: var(--drawer-footer-bg);
+    box-shadow: 0px 0px 16px var(--toggle-strip-shadow);
     & > svg {
-      color: $brand-color;
+      color: var(--brand-color);
     }
   }
 }
@@ -23,12 +22,12 @@
 .ff-icon-disabled {
   cursor: no-drop;
   & > svg {
-    color: $toggle-strip-color;
+    color: var(--toggle-strip-color);
   }
   &:hover {
     box-shadow: none;
     & > svg {
-      color: $toggle-strip-color;
+      color: var(--toggle-strip-color);
     }
   }
 }

package/src/components/MenuOption/MenuOption.scss

@@ -1,4 +1,4 @@
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .ff-menu-option-container {
   cursor: pointer;

package/src/components/MultiSelect/MultiSelect.scss

@@ -1,4 +1,4 @@
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 @mixin flex-center($justify: space-between) {
   display: flex;

package/src/components/RadioButton/RadioButton.scss

@@ -1,5 +1,4 @@
-@import '../../assets/styles/_colors';
-@import '../../assets/styles/_fonts';
+@use '../../assets/styles/_fonts';
 
 @mixin circle($size, $border: none) {
   width: $size;
@@ -16,7 +15,7 @@
 .ff-radio {
   @extend .fontSm;
   position: relative;
-  color: $text-color;
+  color: var(--text-color);
   display: flex;
   align-items: center;
   cursor: pointer;

package/src/components/Search/Search.scss

@@ -1,4 +1,4 @@
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 
 .ff-search-container {

package/src/components/Table/Table.scss

@@ -1,4 +1,4 @@
-@import '../../assets/styles/_fonts';
+@use '../../assets/styles/_fonts';
 
 .ff-fixed-header-table {
   overflow-y: auto;

package/src/components/TextArea/Textarea.scss

@@ -1,5 +1,4 @@
-@use '../../assets/styles/colors' as *;
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .ff-textarea-container {
   display: flex;

package/src/components/Toggle/Toggle.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 $switch-sizes: (
   small: (
     button-size: 16px,
@@ -20,10 +21,10 @@ $switch-sizes: (
 );
 
 @mixin switch-size($size) {
-  $button-size: map-get(map-get($switch-sizes, $size), button-size);
-  $container-width: map-get(map-get($switch-sizes, $size), container-width);
-  $container-height: map-get(map-get($switch-sizes, $size), container-height);
-  $translate-x: map-get(map-get($switch-sizes, $size), translate-x);
+  $button-size: map.get(map.get($switch-sizes, $size), button-size);
+  $container-width: map.get(map.get($switch-sizes, $size), container-width);
+  $container-height: map.get(map.get($switch-sizes, $size), container-height);
+  $translate-x: map.get(map.get($switch-sizes, $size), translate-x);
 
   width: $container-width;
   height: $container-height;

package/src/components/Tooltip/Tooltip.scss

@@ -1,4 +1,4 @@
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .ff-tooltip-container {
   cursor: auto;

package/vite.config.js

@@ -4,11 +4,19 @@ import svgrPlugin from 'vite-plugin-svgr';
 
 export default {
   plugins: [
-    react({ fastRefresh: false }),
+    react(),
     svgrPlugin({
       svgrOptions: {
         icon: true,
       },
     }),
   ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        // This option tells Vite to use Dart Sass for SCSS processing
+        implementation: require('sass'),
+      },
+    },
+  },
 };