pixel-react 1.7.0 → 1.7.1

package/src/StyleGuide/ColorPalette/colorPaletteList.ts

@@ -1,299 +1,299 @@
-import { ColorPaletteType } from './types';
-
-const ColorPalette: ColorPaletteType = [
-  { name: 'Brand Color', colorCode: '#71347b', variable: '--brand-color' },
-  { name: 'Text Color', colorCode: '#1e161f', variable: '--text-color' },
-  {
-    name: 'Description Text',
-    colorCode: '#7a7a7a',
-    variable: '--description-text',
-  },
-  {
-    name: 'Clickable Text Color',
-    colorCode: '#71347b',
-    variable: '--click-able-text-color',
-  },
-  {
-    name: 'Icons Default Color',
-    colorCode: '#71347b',
-    variable: '--icons-default-color',
-  },
-  { name: 'Border Color', colorCode: '#f0e7f4', variable: '--border-color' },
-  {
-    name: 'Disable Color',
-    colorCode: '#71347b',
-    opacity: 0.5,
-    variable: '--disable-color',
-  },
-  { name: 'Hover Color', colorCode: '#f7ebff', variable: '--hover-color' },
-  {
-    name: 'Pop-up Background Blur',
-    colorCode: '#14041c',
-    opacity: 0.1,
-    variable: '--pop-up-background-blur',
-  },
-  {
-    name: 'Drawer Footer Background',
-    colorCode: '#ffffff',
-    border: '#f0e7f4',
-    variable: '--drawer-footer-bg',
-  },
-  {
-    name: 'Slider Table Color',
-    colorCode: '#efe1f9',
-    opacity: 1,
-    variable: '--slider-table-color',
-  },
-  {
-    name: 'Text bg Highlight',
-    colorCode: '#f5fb00',
-    variable: '--text-bg-highlight',
-  },
-
-  {
-    name: 'Tooltip Bg Color',
-    colorCode: '#1e161f',
-    variable: '--tooltip-bg-color',
-  },
-  {
-    name: 'Tooltip Text Color(default)',
-    colorCode: '#ffffff',
-    variable: '--tooltip-text-color',
-  },
-  {
-    name: 'Toggle Strip Color(default)',
-    colorCode: '#cfd1e2',
-    dropShadow: 'drop-shadow(0 0 2px #00000025)',
-    variable: '--toggle-strip-color',
-  },
-  {
-    name: 'Tooltip Text Color(Active)',
-    colorCode: '#ffffff',
-    variable: '--tooltip-text-color',
-  },
-  {
-    name: 'Toggle Strip Color(Active)',
-    colorCode: '#71347b',
-    dropShadow: 'drop-shadow(0 0 2px #00000025)',
-    variable: '--toggle-strip-active',
-  }, // todo  drop shadow
-  {
-    name: 'Primary Button Color',
-    colorCode:
-      'linear-gradient(90deg, rgba(113, 52, 123, 1) 100%, rgba(70, 22, 77, 1) 100%)',
-    variable: '--primary-button-color',
-  },
-  {
-    name: 'Primary Button Hover',
-    colorCode:
-      'linear-gradient(90deg, rgba(141, 59, 154, 1) 100%, rgba(120, 31, 134, 1) 100%)',
-    variable: '--primary-button-hover',
-  },
-  {
-    name: 'Primary Button Disable',
-    colorCode:
-      'linear-gradient(90deg, rgba(113, 52, 123, 1) 100%, rgba(113, 52, 123, 1) 100%)',
-    opacity: 0.5,
-    variable: '--primary-button-disable',
-  },
-  {
-    name: 'Primary Button Text Color',
-    colorCode: '#ffffff',
-    variable: '--primary-button-text-color',
-  },
-  {
-    name: 'Secondary Button Icon Color (default)',
-    colorCode: 'rgba(113, 52, 123, 1)',
-    variable: '--secondary-icon-color',
-  },
-  {
-    name: 'Secondary Button (Hover)',
-    colorCode:
-      'linear-gradient(90deg, rgba(113, 52, 123, 0.05) 100%, rgba(70, 22, 77, 0.05) 100%)',
-    variable: '--secondary-button-hover',
-  },
-  {
-    name: 'Secondary Button (Disabled)',
-    colorCode: 'rgba(113, 52, 123, 1)',
-    opacity: 0.5,
-    variable: '--disable-color',
-  },
-  {
-    name: 'Tertiary Button (default)',
-    colorCode:
-      'linear-gradient(90deg, rgba(70, 22, 77, 0.05) 100%, rgba(113, 52, 123, 0.05) 100%)',
-    variable: '--tertiary-button-color',
-  },
-  {
-    name: 'Tertiary Button (Hover)',
-    colorCode:
-      'linear-gradient(90deg, rgba(70, 22, 77, 0.1) 100%, rgba(113, 52, 123, 0.1) 100%)',
-    variable: '--tertiary-button-hover',
-  },
-  {
-    name: 'Tertiary Button (Disabled)',
-    colorCode:
-      'linear-gradient(90deg, rgba(70, 22, 77, 0.05) 100%, rgba(113, 52, 123, 0.05) 100%)',
-    opacity: 0.5,
-    variable: '--tertiary-button-color',
-  },
-  {
-    name: 'Delete Button Color',
-    colorCode:
-      'linear-gradient(90deg, rgba(228, 37, 37, 1) 100%, rgba(201, 0, 0, 1) 100%)',
-    variable: '--delete-button-color',
-  },
-  {
-    name: 'Delete Button Hover',
-    colorCode:
-      'linear-gradient(90deg, rgba(233, 81, 81, 1) 100%, rgba(212, 52, 52, 1) 100%)',
-    variable: '--delete-button-hover',
-  },
-  {
-    name: 'Delete Button Disabled',
-    colorCode:
-      'linear-gradient(90deg, rgba(233, 81, 81, 1) 100%, rgba(212, 52, 52, 1) 100%)',
-    opacity: 0.5,
-    variable: '--delete-button-disable',
-  },
-  {
-    name: 'Primary Button Text Color',
-    colorCode: '#ffffff',
-    variable: '--primary-button-text-color',
-  },
-  {
-    name: 'Overlay Background',
-    colorCode: '#1e161f',
-    opacity: 0.1,
-    variable: '--overlay-bg',
-  },
-  {
-    name: 'Avatar background color',
-    colorCode: '#71347b',
-    variable: '--avatar-background-color',
-  },
-  {
-    name: 'Avatar icon color',
-    colorCode: '#ffffff',
-    variable: '--avatar-icon-color',
-  },
-  {
-    name: 'Sub Header Primary Color',
-    colorCode: '#301349',
-    variable: '--sub-header-primary',
-  },
-  {
-    name: 'Icon Hover BG Color',
-    colorCode: '#f7ecf8',
-    variable: '--ff-icon-hover-bg-color',
-  },
-  {
-    name: 'Modal Background Color',
-    colorCode: '#12121233',
-    variable: '--modal-background-color',
-  },
-  {
-    name: 'Modal Alert Header Color',
-    colorCode: '#db1919',
-    variable: '--modal-alert-header-color',
-  },
-  {
-    name: 'Line Number Color',
-    colorCode: '#ffffff',
-    variable: '--ff-line-number-color',
-  },
-  {
-    name: 'Editor Border Color',
-    colorCode: '#f0e7f4',
-    variable: '--ff-editor-border-color',
-  },
-  {
-    name: 'Status Card Text Color',
-    colorCode: '#ffffff',
-    variable: '--ff-status-card-text-color',
-  },
-  {
-    name: 'Card Status Text Color',
-    colorCode: '#8a8a8a',
-    variable: '--ff-card-status-text-color',
-  },
-  {
-    name: 'Card Passed Status BG Color',
-    colorCode: '#179c5f',
-    variable: '--ff-card-passed-status-bg-color',
-  },
-  {
-    name: 'Card Failed Status BG Color',
-    colorCode: '#9c1732',
-    variable: '--ff-card-failed-status-bg-color',
-  },
-  {
-    name: 'Card Warning Status BG Color',
-    colorCode: '#e2750f',
-    variable: '--ff-card-warning-status-bg-color',
-  },
-  {
-    name: 'Card Skipped Status BG Color',
-    colorCode: '#a83fc4',
-    variable: '--ff-card-skipped-status-bg-color',
-  },
-  {
-    name: 'Card Flaky Status BG Color',
-    colorCode: '#3f5ac4',
-    variable: '--ff-card-flaky-status-bg-color',
-  },
-  {
-    name: 'Search filed color',
-    colorCode: '#F7ECF8',
-    variable: '--ff-search-field-hover-color',
-  },
-  {
-    name: 'Search filed background color',
-    colorCode: '#F7ECF8',
-    variable: '--ff-search-filed-bg-color',
-  },
-  {
-    name: 'All Projects dropdown default color',
-    colorCode: '#FFFFFF33',
-    variable: '--ff-all-projects-default-color',
-  },
-  {
-    name: 'confirm tick color',
-    colorCode: '#5ca700',
-    variable: 'confirm-tick-icon-color',
-  },
-  {
-    name: 'Dynamic card border color',
-    colorCode: '#eeeaf2',
-    variable: ' dynamic-card-border-color',
-  },
-  {
-    name: 'Card header background color',
-    colorCode: '#592f7c1a',
-    variable: 'card-header-bg-color',
-  },
-  {
-    name: "InputWithDropdown's dropdown background color",
-    colorCode: '#71347b27',
-    variable: 'dropdown-bg-color',
-  },
-  {
-    name: 'info modal background color',
-    colorCode:
-      'linear-gradient(94.23deg,rgba(113, 52, 123, 0.4) 16.33%,rgba(70, 22, 77, 0.4) 80.07%) ',
-    variable: 'brand-color-border',
-  },
-  {
-    name: 'alert modal background color',
-    colorCode:
-      'linear-gradient(94.23deg,rgba(228, 37, 37, 0.4) 16.33%,rgba(201, 0, 0, 0.4) 80.07%) ',
-    variable: 'alert-modal-background-color',
-  },
-  {
-    name: 'Progress bar bg color',
-    colorCode: 'rgba(240, 240, 240, 1)',
-    variable: 'ff-progress-bar-bg-color',
-  },
-];
-
-export default ColorPalette;
+import { ColorPaletteType } from './types';
+
+const ColorPalette: ColorPaletteType = [
+  { name: 'Brand Color', colorCode: '#71347b', variable: '--brand-color' },
+  { name: 'Text Color', colorCode: '#1e161f', variable: '--text-color' },
+  {
+    name: 'Description Text',
+    colorCode: '#7a7a7a',
+    variable: '--description-text',
+  },
+  {
+    name: 'Clickable Text Color',
+    colorCode: '#71347b',
+    variable: '--click-able-text-color',
+  },
+  {
+    name: 'Icons Default Color',
+    colorCode: '#71347b',
+    variable: '--icons-default-color',
+  },
+  { name: 'Border Color', colorCode: '#f0e7f4', variable: '--border-color' },
+  {
+    name: 'Disable Color',
+    colorCode: '#71347b',
+    opacity: 0.5,
+    variable: '--disable-color',
+  },
+  { name: 'Hover Color', colorCode: '#f7ebff', variable: '--hover-color' },
+  {
+    name: 'Pop-up Background Blur',
+    colorCode: '#14041c',
+    opacity: 0.1,
+    variable: '--pop-up-background-blur',
+  },
+  {
+    name: 'Drawer Footer Background',
+    colorCode: '#ffffff',
+    border: '#f0e7f4',
+    variable: '--drawer-footer-bg',
+  },
+  {
+    name: 'Slider Table Color',
+    colorCode: '#efe1f9',
+    opacity: 1,
+    variable: '--slider-table-color',
+  },
+  {
+    name: 'Text bg Highlight',
+    colorCode: '#f5fb00',
+    variable: '--text-bg-highlight',
+  },
+
+  {
+    name: 'Tooltip Bg Color',
+    colorCode: '#1e161f',
+    variable: '--tooltip-bg-color',
+  },
+  {
+    name: 'Tooltip Text Color(default)',
+    colorCode: '#ffffff',
+    variable: '--tooltip-text-color',
+  },
+  {
+    name: 'Toggle Strip Color(default)',
+    colorCode: '#cfd1e2',
+    dropShadow: 'drop-shadow(0 0 2px #00000025)',
+    variable: '--toggle-strip-color',
+  },
+  {
+    name: 'Tooltip Text Color(Active)',
+    colorCode: '#ffffff',
+    variable: '--tooltip-text-color',
+  },
+  {
+    name: 'Toggle Strip Color(Active)',
+    colorCode: '#71347b',
+    dropShadow: 'drop-shadow(0 0 2px #00000025)',
+    variable: '--toggle-strip-active',
+  }, // todo  drop shadow
+  {
+    name: 'Primary Button Color',
+    colorCode:
+      'linear-gradient(90deg, rgba(113, 52, 123, 1) 100%, rgba(70, 22, 77, 1) 100%)',
+    variable: '--primary-button-color',
+  },
+  {
+    name: 'Primary Button Hover',
+    colorCode:
+      'linear-gradient(90deg, rgba(141, 59, 154, 1) 100%, rgba(120, 31, 134, 1) 100%)',
+    variable: '--primary-button-hover',
+  },
+  {
+    name: 'Primary Button Disable',
+    colorCode:
+      'linear-gradient(90deg, rgba(113, 52, 123, 1) 100%, rgba(113, 52, 123, 1) 100%)',
+    opacity: 0.5,
+    variable: '--primary-button-disable',
+  },
+  {
+    name: 'Primary Button Text Color',
+    colorCode: '#ffffff',
+    variable: '--primary-button-text-color',
+  },
+  {
+    name: 'Secondary Button Icon Color (default)',
+    colorCode: 'rgba(113, 52, 123, 1)',
+    variable: '--secondary-icon-color',
+  },
+  {
+    name: 'Secondary Button (Hover)',
+    colorCode:
+      'linear-gradient(90deg, rgba(113, 52, 123, 0.05) 100%, rgba(70, 22, 77, 0.05) 100%)',
+    variable: '--secondary-button-hover',
+  },
+  {
+    name: 'Secondary Button (Disabled)',
+    colorCode: 'rgba(113, 52, 123, 1)',
+    opacity: 0.5,
+    variable: '--disable-color',
+  },
+  {
+    name: 'Tertiary Button (default)',
+    colorCode:
+      'linear-gradient(90deg, rgba(70, 22, 77, 0.05) 100%, rgba(113, 52, 123, 0.05) 100%)',
+    variable: '--tertiary-button-color',
+  },
+  {
+    name: 'Tertiary Button (Hover)',
+    colorCode:
+      'linear-gradient(90deg, rgba(70, 22, 77, 0.1) 100%, rgba(113, 52, 123, 0.1) 100%)',
+    variable: '--tertiary-button-hover',
+  },
+  {
+    name: 'Tertiary Button (Disabled)',
+    colorCode:
+      'linear-gradient(90deg, rgba(70, 22, 77, 0.05) 100%, rgba(113, 52, 123, 0.05) 100%)',
+    opacity: 0.5,
+    variable: '--tertiary-button-color',
+  },
+  {
+    name: 'Delete Button Color',
+    colorCode:
+      'linear-gradient(90deg, rgba(228, 37, 37, 1) 100%, rgba(201, 0, 0, 1) 100%)',
+    variable: '--delete-button-color',
+  },
+  {
+    name: 'Delete Button Hover',
+    colorCode:
+      'linear-gradient(90deg, rgba(233, 81, 81, 1) 100%, rgba(212, 52, 52, 1) 100%)',
+    variable: '--delete-button-hover',
+  },
+  {
+    name: 'Delete Button Disabled',
+    colorCode:
+      'linear-gradient(90deg, rgba(233, 81, 81, 1) 100%, rgba(212, 52, 52, 1) 100%)',
+    opacity: 0.5,
+    variable: '--delete-button-disable',
+  },
+  {
+    name: 'Primary Button Text Color',
+    colorCode: '#ffffff',
+    variable: '--primary-button-text-color',
+  },
+  {
+    name: 'Overlay Background',
+    colorCode: '#1e161f',
+    opacity: 0.1,
+    variable: '--overlay-bg',
+  },
+  {
+    name: 'Avatar background color',
+    colorCode: '#71347b',
+    variable: '--avatar-background-color',
+  },
+  {
+    name: 'Avatar icon color',
+    colorCode: '#ffffff',
+    variable: '--avatar-icon-color',
+  },
+  {
+    name: 'Sub Header Primary Color',
+    colorCode: '#301349',
+    variable: '--sub-header-primary',
+  },
+  {
+    name: 'Icon Hover BG Color',
+    colorCode: '#f7ecf8',
+    variable: '--ff-icon-hover-bg-color',
+  },
+  {
+    name: 'Modal Background Color',
+    colorCode: '#12121233',
+    variable: '--modal-background-color',
+  },
+  {
+    name: 'Modal Alert Header Color',
+    colorCode: '#db1919',
+    variable: '--modal-alert-header-color',
+  },
+  {
+    name: 'Line Number Color',
+    colorCode: '#ffffff',
+    variable: '--ff-line-number-color',
+  },
+  {
+    name: 'Editor Border Color',
+    colorCode: '#f0e7f4',
+    variable: '--ff-editor-border-color',
+  },
+  {
+    name: 'Status Card Text Color',
+    colorCode: '#ffffff',
+    variable: '--ff-status-card-text-color',
+  },
+  {
+    name: 'Card Status Text Color',
+    colorCode: '#8a8a8a',
+    variable: '--ff-card-status-text-color',
+  },
+  {
+    name: 'Card Passed Status BG Color',
+    colorCode: '#179c5f',
+    variable: '--ff-card-passed-status-bg-color',
+  },
+  {
+    name: 'Card Failed Status BG Color',
+    colorCode: '#9c1732',
+    variable: '--ff-card-failed-status-bg-color',
+  },
+  {
+    name: 'Card Warning Status BG Color',
+    colorCode: '#e2750f',
+    variable: '--ff-card-warning-status-bg-color',
+  },
+  {
+    name: 'Card Skipped Status BG Color',
+    colorCode: '#a83fc4',
+    variable: '--ff-card-skipped-status-bg-color',
+  },
+  {
+    name: 'Card Flaky Status BG Color',
+    colorCode: '#3f5ac4',
+    variable: '--ff-card-flaky-status-bg-color',
+  },
+  {
+    name: 'Search filed color',
+    colorCode: '#F7ECF8',
+    variable: '--ff-search-field-hover-color',
+  },
+  {
+    name: 'Search filed background color',
+    colorCode: '#F7ECF8',
+    variable: '--ff-search-filed-bg-color',
+  },
+  {
+    name: 'All Projects dropdown default color',
+    colorCode: '#FFFFFF33',
+    variable: '--ff-all-projects-default-color',
+  },
+  {
+    name: 'confirm tick color',
+    colorCode: '#5ca700',
+    variable: 'confirm-tick-icon-color',
+  },
+  {
+    name: 'Dynamic card border color',
+    colorCode: '#eeeaf2',
+    variable: ' dynamic-card-border-color',
+  },
+  {
+    name: 'Card header background color',
+    colorCode: '#592f7c1a',
+    variable: 'card-header-bg-color',
+  },
+  {
+    name: "InputWithDropdown's dropdown background color",
+    colorCode: '#71347b27',
+    variable: 'dropdown-bg-color',
+  },
+  {
+    name: 'info modal background color',
+    colorCode:
+      'linear-gradient(94.23deg,rgba(113, 52, 123, 0.4) 16.33%,rgba(70, 22, 77, 0.4) 80.07%) ',
+    variable: 'brand-color-border',
+  },
+  {
+    name: 'alert modal background color',
+    colorCode:
+      'linear-gradient(94.23deg,rgba(228, 37, 37, 0.4) 16.33%,rgba(201, 0, 0, 0.4) 80.07%) ',
+    variable: 'alert-modal-background-color',
+  },
+  {
+    name: 'Progress bar bg color',
+    colorCode: 'rgba(240, 240, 240, 1)',
+    variable: 'ff-progress-bar-bg-color',
+  },
+];
+
+export default ColorPalette;

package/src/StyleGuide/ColorPalette/index.ts

@@ -1 +1 @@
-export { default } from './ColorPalette';
+export { default } from './ColorPalette';

package/src/StyleGuide/ColorPalette/types.ts

@@ -1,19 +1,19 @@
-export interface ColorBoxProps {
-  name: string;
-  colorCode: string;
-  opacity?: number;
-  dropShadow?: string;
-  border?: string;
-  variable?: string;
-}
-
-export interface Color {
-  name: string;
-  colorCode: string;
-  opacity?: number;
-  dropShadow?: string;
-  border?: string;
-  variable?: string;
-}
-
-export type ColorPaletteType = Color[];
+export interface ColorBoxProps {
+  name: string;
+  colorCode: string;
+  opacity?: number;
+  dropShadow?: string;
+  border?: string;
+  variable?: string;
+}
+
+export interface Color {
+  name: string;
+  colorCode: string;
+  opacity?: number;
+  dropShadow?: string;
+  border?: string;
+  variable?: string;
+}
+
+export type ColorPaletteType = Color[];