mada-design-system 0.0.9 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mada-design-system",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "sideEffects": false,
   "private": false,
   "main": "index.es.js",
@@ -24,7 +24,7 @@
     "@dnd-kit/sortable": "^9.0.0",
     "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
-    "@hookform/resolvers": "^3.10.0",
+    "@hookform/resolvers": "^3.3.1",
     "@mui/material": "5.15.3",
     "@mui/x-date-pickers": "6.18.7",
     "@radix-ui/react-accordion": "^1.2.2",
@@ -53,6 +53,7 @@
     "@tailwindcss/typography": "^0.5.10",
     "@tanstack/react-query": "5.55.4",
     "@tanstack/react-table": "^8.20.6",
+    "@tanstack/react-virtual": "^3.13.2",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
@@ -68,6 +69,7 @@
     "react-hook-form": "7.54.2",
     "react-localization": "^1.0.19",
     "react-router-dom": "^6.16.0",
+    "recharts": "^2.15.1",
     "sonarqube-scanner": "^4.2.6",
     "tailwind-merge": "^1.14.0",
     "tailwind-scrollbar": "^3.1.0",
@@ -78,6 +80,7 @@
     "zustand": "^4.5.1"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^3",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@rollup/plugin-inject": "^5.0.5",
     "@storybook/addon-a11y": "^8.5.3",
@@ -86,6 +89,7 @@
     "@storybook/addon-links": "^8.5.3",
     "@storybook/addon-mdx-gfm": "^8.5.3",
     "@storybook/addon-onboarding": "^8.5.3",
+    "@storybook/addon-themes": "^8.5.6",
     "@storybook/blocks": "^8.5.3",
     "@storybook/manager-api": "^8.5.3",
     "@storybook/preview-api": "^8.5.3",
@@ -108,7 +112,7 @@
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.11.2",
     "postcss": "^8.5.1",
     "postcss-rtlcss": "^4.0.8",
     "prettier": "^3.4.2",

package/style.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap";:root{--background: #F9f9f9;--background-foreground: #0F0F0F;--background-secondary: #EBEBEB;--background-brand: #F8FCFB;--foreground: #0F0F0F;--overlay: #212625BD;--foreground-secondary: #212625BD;--foreground-tertiary: #353B3A99;--card: #fff;--card-foreground: #0F0F0F;--card-hover: #7E7E7E0D;--card-active: #FAFAFA;--popover: #fff;--popover-foreground: #0F0F0F;--primary: #178F72;--primary-foreground: #fff;--primary-light: #7CD9BA;--primary-dark: #116B57;--primary-oncontainer: #0E463B;--primary-container: #D6F5E7;--secondary: #8966C5;--secondary-foreground: #fff;--secondary-light: #CFC6EC;--secondary-dark: #7751B0;--secondary-oncontainer: #533979;--secondary-container: #F0EEF9;--tertiary: #1A72AF;--tertiary-foreground: #fff;--tertiary-light: #8DC7EC;--tertiary-dark: #155685;--tertiary-oncontainer: #184262;--tertiary-container: #E4F0FA;--error: #CE2D2D;--error-foreground: #fff;--error-light: #F7AAAA;--error-dark: #B02525;--error-oncontainer: #7A2222;--error-container: #FCE4E4;--sucess: #398F54;--sucess-foreground: #fff;--sucess-light: #A5CDB2;--sucess-dark: #2B6B3F;--sucess-oncontainer: #1F4D2D;--sucess-container: #D5F5DE;--warning: #B25E09;--warning-foreground: #fff;--warning-light: #FDCF72;--warning-dark: #96530F;--warning-oncontainer: #663B0F;--warning-container: #FFF1D6;--info: #1A72AF;--info-foreground: #fff;--info-light: #8DC7EC;--info-dark: #155685;--info-oncontainer: #184262;--info-container: #E4F0FA;--muted: #F9f9f9;--muted-foreground: #0F0F0F;--accent: 210 40% 96.1%;--accent-foreground: 222.2 47.4% 11.2%;--destructive: #E54E4E;--destructive-foreground: #fff;--inverted: #0F0F0F;--inverted-secondary: #353B3A99;--inverted-foreground: #fff;--border: #EBEBEB;--border-secondary: #EBEBEB;--disabled: #393A404D;--disabled-foreground: #FAFAFA;--input: #353B3A3B;--ring: #0F0F0F;--divider: #353B3A3B;--skeleton: #353B3A33;--radius: 12px}.dark{--background: #313336;--background-foreground: #FFFFFF;--background-secondary: #414549;--background-brand: #313336;--foreground: #fff;--overlay: #CECECE;--foreground-secondary: #CECECE;--foreground-tertiary: #B7BBBC;--card: #242629;--card-foreground: #fff;--card-hover: #414549;--card-active: #313336;--popover: #242629;--popover-foreground: #fff;--primary: #23A684;--primary-foreground: #fff;--primary-light: #46C19C;--primary-dark: #178F72;--primary-oncontainer: #EEFBF6;--primary-container: #0E463B;--secondary: #9A7FD4;--secondary-foreground: #fff;--secondary-light: #B5A4E1;--secondary-dark: #8966C5;--secondary-oncontainer: #F7F6FB;--secondary-container: #533979;--tertiary: #2990CE;--tertiary-foreground: #fff;--tertiary-light: #50ABE0;--tertiary-dark: #1A72AF;--tertiary-oncontainer: #F2F8FD;--tertiary-container: #184262;--error: #E54E4E;--error-foreground: #fff;--error-light: #F07979;--error-dark: #CE2D2D;--error-oncontainer: #FDF3F3;--error-container: #7A2222;--sucess: #489961;--sucess-foreground: #fff;--sucess-light: #8BBF9B;--sucess-dark: #398F54;--sucess-oncontainer: #E5F0E8;--sucess-container: #1F4D2D;--warning: #DB7712;--warning-foreground: #fff;--warning-light: #FBBB3C;--warning-dark: #B25E09;--warning-oncontainer: #FFF8EB;--warning-container: #663B0F;--info: #2990CE;--info-foreground: #fff;--info-light: #50ABE0;--info-dark: #1A72AF;--info-oncontainer: #F2F8FD;--info-container: #184262;--muted: #313336;--muted-foreground: #fff;--accent: 210 40% 96.1%;--accent-foreground: 222.2 47.4% 11.2%;--destructive: #E54E4E;--destructive-foreground: #fff;--inverted: #FFFFFF;--inverted-secondary: #CECECE;--inverted-foreground: #242629;--border: #555E65;--border-secondary: #494F55;--disabled: #636F77;--disabled-foreground: #CECECE;--input: #555E65;--ring: #0F0F0F;--divider: #555E65;--skeleton: #636F77;--radius: 12px}*{border-color:var(--border)}html{scroll-behavior:smooth;font-size:55%}@media (min-width: 640px){html{font-size:62.5%}}body{background-color:var(--card);font-size:1.6rem;color:var(--foreground)}body:where([dir=ltr],[dir=ltr] *){font-family:Noto Sans,ui-sans-serif,system-ui}body:where([dir=rtl],[dir=rtl] *){font-family:Noto Kufi Arabic,ui-sans-serif,system-ui}input:-webkit-autofill,input:-webkit-autofill:focus{-webkit-transition:background-color 0s 600000s,color 0s 600000s!important;transition:background-color 0s 600000s,color 0s 600000s!important}.title-01{font-size:2rem;line-height:2.8rem}@media (min-width: 1024px){.title-01{font-size:2.4rem;line-height:3.2rem}}.title-02{font-size:2.4rem;font-weight:700;line-height:3.2rem}@media (min-width: 1024px){.title-02{font-size:3.2rem;line-height:4rem}}.title-03{font-size:2.8rem;line-height:3.6rem}@media (min-width: 768px){.title-03{font-size:4rem;line-height:5.2rem}}@media (min-width: 1024px){.title-03{font-size:4.8rem;line-height:6rem}}.display-01{font-size:4rem;font-weight:700;line-height:5.2rem}@media (min-width: 1024px){.display-01{font-size:4.8rem;line-height:6.2rem}}@media (min-width: 1280px){.display-01{font-size:6.4rem;line-height:8.8rem}}.display-02{font-size:4.2rem;font-weight:700;line-height:5.4rem}@media (min-width: 768px){.display-02{font-size:5.4rem;line-height:7rem}}@media (min-width: 1024px){.display-02{font-size:8.4rem;line-height:9.8rem}}.dsgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}@media (min-width: 768px){.dsgrid{grid-template-columns:repeat(8,minmax(0,1fr))}}@media (min-width: 1024px){.dsgrid{grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}}.MuiButtonBase-root.MuiPickersDay-root{border-radius:8px;font-size:1.4rem;line-height:2rem}.MuiButtonBase-root.MuiPickersDay-root:hover{background-color:var(--primary-container)}.MuiButtonBase-root.MuiPickersDay-root:disabled{color:var(--disabled)!important}.MuiButtonBase-root.MuiPickersDay-root:is(.dark *){color:var(--foreground)}.MuiButtonBase-root.MuiPickersDay-root:where([dir=ltr],[dir=ltr] *){font-family:Noto Sans,ui-sans-serif,system-ui}.MuiButtonBase-root.MuiPickersDay-root:where([dir=rtl],[dir=rtl] *){font-family:Noto Kufi Arabic,ui-sans-serif,system-ui}.MuiPickersCalendarHeader-label:where([dir=ltr],[dir=ltr] *),.MuiDayCalendar-header .MuiTypography-caption.MuiDayCalendar-weekDayLabel:where([dir=ltr],[dir=ltr] *){font-family:Noto Sans,ui-sans-serif,system-ui}.MuiPickersCalendarHeader-label:where([dir=rtl],[dir=rtl] *),.MuiDayCalendar-header .MuiTypography-caption.MuiDayCalendar-weekDayLabel:where([dir=rtl],[dir=rtl] *){font-family:Noto Kufi Arabic,ui-sans-serif,system-ui}.MuiButtonBase-root.MuiPickersDay-root.Mui-selected,.MuiButtonBase-root.MuiPickersDay-root:focus.Mui-selected{background-color:var(--primary)}.MuiDayCalendar-header .MuiTypography-caption{font-size:1.2rem;line-height:1.6rem;color:var(--foreground-secondary)}.MuiPickersCalendarHeader-root{justify-content:space-between}.MuiPickersCalendarHeader-root>div{margin:0;font-size:1.4rem;line-height:2rem}.MuiButtonBase-root.MuiIconButton-root{font-size:1.4rem;line-height:2rem}.MuiButtonBase-root.MuiIconButton-root:is(.dark *){color:var(--foreground)}.MuiButtonBase-root.MuiIconButton-root:where([dir=ltr],[dir=ltr] *){--tw-rotate: 0deg !important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.MuiButtonBase-root.MuiIconButton-root:where([dir=rtl],[dir=rtl] *){--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.MuiPickersYear-root .MuiPickersYear-yearButton{font-size:1.4rem;line-height:2rem}.MuiPickersYear-root .MuiPickersYear-yearButton:hover{background-color:var(--primary-container)}.MuiPickersYear-root .MuiPickersYear-yearButton.Mui-selected{background-color:var(--primary)!important}.Mui-disabled.MuiPickersDay-today{border-color:transparent!important}.MuiButtonBase-root.MuiPickersDay-root.Mui-selected:hover{background-color:var(--primary-dark)!important}html[dir=ltr] .MuiDateCalendar-root{direction:ltr}html[dir=rtl] .MuiDateCalendar-root{direction:rtl}
+@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap";:root{--background: #F9f9f9;--background-foreground: #0F0F0F;--background-secondary: #EBEBEB;--background-brand: #F7FDF9;--foreground: #0F0F0F;--overlay: #212625BD;--foreground-secondary: #212625BD;--foreground-tertiary: #353B3A99;--card: #fff;--card-foreground: #0F0F0F;--card-hover: #7E7E7E0D;--card-active: #FAFAFA;--popover: #fff;--popover-foreground: #0F0F0F;--primary: #1B8354;--primary-foreground: #fff;--primary-light: #88D8AD;--primary-dark: #166A45;--primary-oncontainer: #104631;--primary-container: #DFF6E7;--secondary: #DBA102;--secondary-foreground: #fff;--secondary-light: #FAE996;--secondary-dark: #B87B02;--secondary-oncontainer: #6E3C00;--secondary-container: #FFFCE6;--tertiary: #6D428F;--tertiary-foreground: #fff;--tertiary-light: #CCADD9;--tertiary-dark: #532D75;--tertiary-oncontainer: #281047;--tertiary-container: #F2E9F5;--error: #D92D20;--error-foreground: #fff;--error-light: #FDA29B;--error-dark: #B42318;--error-oncontainer: #7A271A;--error-container: #FEE4E2;--sucess: #079455;--sucess-foreground: #fff;--sucess-light: #75E0A7;--sucess-dark: #067647;--sucess-oncontainer: #074D31;--sucess-container: #DCFAE6;--warning: #DC6803;--warning-foreground: #fff;--warning-light: #FEC84B;--warning-dark: #B54708;--warning-oncontainer: #7A2E0E;--warning-container: #FEF0C7;--info: #1570EF;--info-foreground: #fff;--info-light: #84CAFF;--info-dark: #175CD3;--info-oncontainer: #194185;--info-container: #D1E9FF;--muted: #F9f9f9;--muted-foreground: #0F0F0F;--accent: 210 40% 96.1%;--accent-foreground: 222.2 47.4% 11.2%;--destructive: #F04438;--destructive-foreground: #fff;--inverted: #0F0F0F;--inverted-secondary: #353B3A99;--inverted-foreground: #fff;--border: #EBEBEB;--border-secondary: #EBEBEB;--disabled: #9DA4AE;--disabled-foreground: #F9FAFB;--disabled-control-disabled: #9DA4AE;--disabled-border-disabled: #9DA4AE;--input: #353B3A3B;--ring: #0F0F0F;--divider: #353B3A3B;--skeleton: #353B3A33;--radius: 12px;--primary-10: #FFFFFF;--primary-25: #F7FDF9;--primary-50: #F3FCF6;--primary-100: #DFF6E7;--primary-200: #B8EACB;--primary-300: #88D8AD;--primary-400: #54C08A;--primary-500: #25935F;--primary-600: #1B8354;--primary-700: #166A45;--primary-800: #14573A;--primary-900: #104631;--primary-950: #092A1E;--secondary-10: #FFFFFF;--secondary-25: #FFFEF7;--secondary-50: #FFFEF2;--secondary-100: #FFFCE6;--secondary-200: #FCF3BD;--secondary-300: #FAE996;--secondary-400: #F7D54D;--secondary-500: #F5BD02;--secondary-600: #DBA102;--secondary-700: #B87B02;--secondary-800: #945C01;--secondary-900: #6E3C00;--secondary-950: #472400;--tertiary-10: #FFFFFF;--tertiary-25: #FEFCFF;--tertiary-50: #F9F5FA;--tertiary-100: #F2E9F5;--tertiary-200: #E1CCE8;--tertiary-300: #CCADD9;--tertiary-400: #A57BBA;--tertiary-500: #80519F;--tertiary-600: #6D428F;--tertiary-700: #532D75;--tertiary-800: #3D1D5E;--tertiary-900: #281047;--tertiary-950: #16072E;--text-default: #161616;--text-primary: var(--primary-600);--text-secondary: var(--secondary-600);--text-tertiary: var(--tertiary-600);--text-primary-sa-flag: var(--primary-800);--text-display: #1F2A37;--text-paragraph-primary: #384250;--text-paragraph-secondary: #6C737F;--text-oncolor-primary: #fff;--text-oncolor-secondary: #FFFFFFCC;--text-oncolor-tertiary: #FFFFFFB2;--text-success: #067647;--text-info: #175CD3;--text-warning: #B54708;--text-error: #B42318;--text-primary-light: var(--primary-300);--text-secondary-light: var(--secondary-300);--text-tertiary-light: var(--tertiary-300);--text-default-disabled: #9DA4AE;--text-default-oncolor-disabled: #FFFFFF66;--text-form-title: var(--text-default);--text-form-paragraph: var(--text-paragraph-secondary);--field-text-label: var(--text-default);--field-text-placeholder: var(--text-paragraph-secondary);--field-text-hovered: var(--text-default);--field-text-focused: var(--text-paragraph-primary);--field-text-pressed: var(--text-paragraph-primary);--field-text-filled: var(--text-default);--field-text-readonly: var(--text-default);--field-text-helper: var(--text-paragraph-secondary);--field-background-default: var(--background-card);--field-background-lighter: #FCFCFD;--field-background-darker: #F3F4F6;--field-background-pressed: #F3F4F6;--field-border-default: #9DA4AE;--field-border-hovered: #384250;--field-border-pressed: #0D121C;--field-border-error: var(--border-error);--border-primary: #E5E7EB;--border-secondary: #D2D6DB;--border-white: #fff;--border-white-40: #FFFFFF66;--border-black: #161616;--border-primary-default: var(--primary-600);--border-primary-light: var(--primary-200);--border-secondary-default: var(--secondary-600);--border-secondary-light: var(--secondary-200);--border-tertiary: var(--tertiary-500);--border-tertiary-light: var(--tertiary-200);--border-neutral-primary: #D2D6DB;--border-neutral-secondary: #E5E7EB;--border-neutral-tertiary: #F3F4F6;--border-background-white: #F3F4F6;--border-background-neutral: #D2D6DB;--border-transparent-10: #FFFFFF19;--border-oncolor-transparent-30: #FFFFFF4C;--border-success: #067647;--border-success-light: #ABEFC6;--border-info: #175CD3;--border-info-light: #B2DDFF;--border-warning: #B54708;--border-warning-light: #FEDF89;--border-error: #B42318;--border-error-light: #FECDCA;--border-disabled: #D2D6DB;--control-primary: #fff;--control-primary-checked: var(--primary-600);--control-primary-hovered: var(--primary-800);--control-primary-pressed: var(--primary-900);--control-primary-focused: var(--primary-600);--control-neutral-checked: #0D121C;--control-neutral-hovered: #4D5761;--control-neutral-pressed: #6C737F;--control-neutral-focused: #0D121C;--control-primary--readonly: #fff;--control-pressed: #D2D6DB;--control-ripple-effect: #F3F4F6;--control-border: #6C737F;--control-icon-hovered: #fff;--control-icon-pressed: #fff;--control-icon-disabled: #fff;--control-border-disabled: #9DA4AE;--control-disabled: #D2D6DB;--tag-background-neutral: #4D5761;--tag-background-neutral-light: #F9FAFB;--tag-background-on-color: #FFFFFF33;--tag-text-neutral: #1F2A37;--tag-text-success: #085D3A;--tag-text-info: #1849A9;--tag-text-warning: #93370D;--tag-text-error: #912018;--tag-text-primary: var(--primary-800);--tag-text-secondary: var(--secondary-800);--tag-icon-primary: var(--primary-800);--tag-icon-secondary: var(--secondary-800);--tag-icon-tertiary: var(--tertiary-800);--tag-text-tertiary: var(--tertiary-800);--tag-icon-neutral: #1F2A37;--tag-icon-success: #085D3A;--tag-icon-info: #1849A9;--tag-icon-warning: #93370D;--tag-icon-error: #912018;--tag-background-success: #067647;--tag-background-success-light: #ECFDF3;--tag-background-info: #1570EF;--tag-background-info-light: #EFF8FF;--tag-background-warning: #B54708;--tag-background-warning-light: #FFFAEB;--tag-background-error: #D92D20;--tag-background-error-light: #FEF3F2;--tag-background-primary: var(--primary-600);--tag-background-primary-light: var(--primary-50);--tag-background-secondary: var(--secondary-600);--tag-background-secondary-light: var(--secondary-50);--tag-background-tertiary: var(--tertiary-600);--tag-background-tertiary-light: var(--tertiary-50);--tag-border-neutral: #4D5761;--tag-border-neutral-light: #F9FAFB;--tag-border-on-color: #FFFFFF99;--tag-border-success: #067647;--tag-border-success-light: #ABEFC6;--tag-border-info: #175CD3;--tag-border-info-light: #B2DDFF;--tag-border-warning: #B54708;--tag-border-warning-light: #FEDF89;--tag-border-error: #B42318;--tag-border-error-light: #FECDCA;--tag-border-primary: var(--primary-700);--tag-border-primary-light: var(--primary-200);--tag-border-secondary: var(--secondary-700);--tag-border-secondary-light: var(--secondary-200);--tag-border-tertiary: var(--tertiary-700);--tag-border-tertiary-light: var(--tertiary-200);--tag-dot: #FFFFFF99;--icon-oncolor: #fff;--icon-default: #161616;--icon-default-500: #6C737F;--icon-default-400: #9DA4AE;--icon-primary: var(--primary-600);--icon-primary-light: var(--primary-50);--icon-primary-400: var(--primary-400);--icon-neutral: #384250;--icon-neutral-light: #F9FAFB;--icon-secondary: var(--secondary-600);--icon-secondary-light: var(--secondary-50);--icon-tertiary: var(--tertiary-500);--icon-tertiary-light: var(--tertiary-50);--icon-success: #067647;--icon-success-light: #ECFDF3;--icon-info: #175CD3;--icon-info-light: #EFF8FF;--icon-warning: #B54708;--icon-warning-light: #FFFAEB;--icon-error: #B42318;--icon-error-light: #FEF3F2;--background-warning-light: var(--background-warning-50);--background-error-light: var(--background-error-50);--background-primary-light: var(--background-primary-50);--background-info-light: var(--background-info-50);--background-success-light: var(--background-success-50);--unselected-tab-icon: #384250;--icon-default-disabled: #9DA4AE;--icon-default-oncolor-disabled: #FFFFFF66;--background-white: #fff;--background-body: #F9FAFB;--background-menu: #fff;--background-muted: #FCFCFD;--background-card: #fff;--surface-oncolor: #161616;--background-black: #161616;--background-neutral-800: #1F2A37;--background-neutral-400: #9DA4AE;--background-neutral-300: #D2D6DB;--background-neutral-200: #E5E7EB;--background-neutral-100: #F3F4F6;--background-neutral-50: #F9FAFB;--background-neutral-25: #FCFCFD;--background-primary: var(--primary-600);--background-primary-400: var(--primary-400);--background-primary-200: var(--primary-200);--background-primary-50: var(--primary-50);--background-primary-25: var(--primary-25);--background-secondary-default: var(--secondary-600);--background-secondary-50: var(--secondary-50);--background-secondary-25: var(--secondary-25);--background-tertiary: var(--tertiary-600);--background-tertiary-50: var(--tertiary-50);--background-tertiary-25: var(--tertiary-25);--background-success: #079455;--background-success-50: #ECFDF3;--background-success-25: #F6FEF9;--background-info: #1570EF;--background-info-50: #EFF8FF;--background-info-25: #F5FAFF;--background-warning: #DC6803;--background-warning-50: #FFFAEB;--background-warning-25: #FFFCF5;--background-error: #D92D20;--background-error-50: #FEF3F2;--background-error-25: #FFFBFA;--background-SA-Flag: #074D31;--background-SA-Flag-50: #ECFDF3;--background-SA-Flag-25: #F6FEF9;--background-notification-white: #fff;--background-nav-header: var(--primary-800);--background-disabled: #E5E7EB;--background-disabled-primary: var(--primary-200);--background-inverse-disabled: #F3F4F6;--background-black-default: #0D121C;--background-black-hovered: #1F2A37;--background-black-pressed: #4D5761;--background-black-selected: #384250;--background-black-focused: #0D121C;--background-primary-default: var(--primary-600);--background-primary-hovered: var(--primary-700);--background-primary-pressed: var(--primary-900);--background-primary-selected: var(--primary-800);--background-primary-focused: var(--primary-600);--background-neutral-default: #F3F4F6;--background-neutral-hovered: #F3F4F6;--background-neutral-pressed: #E5E7EB;--background-neutral-selected: #E5E7EB;--background-neutral-focused: #F3F4F6;--background-error-default: #D92D20;--background-error-hovered: #B42318;--background-error-pressed: #7A271A;--background-error-selected: #912018;--background-error-focused: #D92D20;--label-error-primary-oncolor-1: #FECDCA;--label-error-primary-oncolor-2: #FDA29B;--label-error-primary-oncolor-3: #F97066;--background-error-secondary-default: #FEF3F2;--background-error-secondary-hovered: #FEE4E2;--background-error-secondary-pressed: #FECDCA;--background-error-secondary-selected: #FEF3F2;--background-error-secondary-focused: #FEF3F2;--background-primary-light-default: var(--primary-50);--background-primary-light-hovered: var(--primary-100);--background-primary-light-pressed: var(--primary-200);--background-primary-light-selected: var(--primary-50);--background-primary-light-focused: var(--primary-50);--background-oncolor-default: #fff;--background-oncolor-hovered: #FFFFFFCC;--background-oncolor-pressed: #FFFFFF99;--background-oncolor-selected: #FFFFFFB2;--background-oncolor-focused: #FFFFFF;--background-transparent-default: #FFFFFF00;--background-transparent-hovered: #FFFFFF33;--background-transparent-pressed: #FFFFFF66;--background-transparent-selected: #FFFFFF4C;--background-transparent-focused: #FFFFFF00;--background-disabled-oncolor: #FFFFFF33;--label-transparent-hover-oncolor: var(--primary-400);--label-transparent-pressed-oncolor: var(--primary-300);--label-transparent-selected-oncolor: var(--primary-400);--icon-transparent-hover-oncolor: var(--primary-400);--icon-transparent-pressed-oncolor: var(--primary-300);--icon-transparent-selected-oncolor: var(--primary-400);--link-primary: var(--primary-600);--link-primary-hovered: var(--primary-400);--link-primary-pressed: var(--primary-300);--link-primary-focused: var(--primary-600);--link-primary-visited: var(--primary-800);--link-icon-primary-hovered: var(--primary-400);--link-icon-primary-pressed: var(--primary-300);--link-icon-primary-focused: var(--primary-600);--link-icon-primary-visited: var(--primary-800);--link-neutral: #384250;--link-neutral-hovered: #6C737F;--link-neutral-pressed: #9DA4AE;--link-neutral-focused: #384250;--link-neutral-visited: #4D5761;--link-icon-neutral-hovered: #6C737F;--link-icon-neutral-pressed: #9DA4AE;--link-icon-neutral-focused: #384250;--link-icon-neutral-visited: #4D5761;--link-oncolor: #fff;--link-oncolor-hovered: #FFFFFFCC;--link-icon-oncolor-hovered: #FFFFFFCC;--link-oncolor-pressed: #FFFFFF99;--link-icon-oncolor-pressed: #FFFFFF99;--link-oncolor-focused: #fff;--link-oncolor-visited: #FFFFFFE5;--link-icon-oncolor-visited: #FFFFFFE5;--link-oncolor-disabled: #FFFFFF4C;--link-icon-oncolor-disabled: #FFFFFF4C;--link-error: #D92D20;--link-error-hovered: #B42318;--link-icon-error-hovered: #B42318;--link-error-pressed: #7A271A;--link-icon-error-pressed: #7A271A;--link-error-focused: #912018;--link-icon-error-focused: #912018;--link-error-visited: #D92D20;--link-icon-error-visited: #D92D20;--link-secondary: var(--secondary-600);--link-secondary-hovered: var(--secondary-400);--link-secondary-pressed: var(--secondary-300);--link-secondary-focused: var(--secondary-600);--link-secondary-visited: var(--secondary-900);--link-tertiary: var(--tertiary-500);--link-tertiary-hovered: var(--tertiary-400);--link-tertiary-pressed: var(--tertiary-300);--link-tertiary-focused: var(--tertiary-500);--link-tertiary-visited: var(--tertiary-800)}.dark{--background: #313336;--background-foreground: #FFFFFF;--background-secondary: #414549;--background-brand: #313336;--foreground: #fff;--overlay: #CECECE;--foreground-secondary: #CECECE;--foreground-tertiary: #B7BBBC;--card: #242629;--card-foreground: #fff;--card-hover: #414549;--card-active: #313336;--popover: #242629;--popover-foreground: #fff;--primary: #25935F;--primary-foreground: #fff;--primary-light: #54C08A;--primary-dark: #1B8354;--primary-oncontainer: #F3FCF6;--primary-container: #104631;--secondary: #80519F;--secondary-foreground: #fff;--secondary-light: #A57BBA;--secondary-dark: #6D428F;--secondary-oncontainer: #F9F5FA;--secondary-container: #281047;--tertiary: #2E90FA;--tertiary-foreground: #fff;--tertiary-light: #53B1FD;--tertiary-dark: #1570EF;--tertiary-oncontainer: #EFF8FF;--tertiary-container: #194185;--error: #F04438;--error-foreground: #fff;--error-light: #F97066;--error-dark: #D92D20;--error-oncontainer: #FEF3F2;--error-container: #7A271A;--sucess: #17B26A;--sucess-foreground: #fff;--sucess-light: #47CD89;--sucess-dark: #079455;--sucess-oncontainer: #ECFDF3;--sucess-container: #074D31;--warning: #F79009;--warning-foreground: #fff;--warning-light: #FDB022;--warning-dark: #DC6803;--warning-oncontainer: #FFFAEB;--warning-container: #7A2E0E;--info: #2E90FA;--info-foreground: #fff;--info-light: #53B1FD;--info-dark: #1570EF;--info-oncontainer: #EFF8FF;--info-container: #194185;--muted: #313336;--muted-foreground: #fff;--accent: 210 40% 96.1%;--accent-foreground: 222.2 47.4% 11.2%;--destructive: #F04438;--destructive-foreground: #fff;--inverted: #FFFFFF;--inverted-secondary: #CECECE;--inverted-foreground: #242629;--border: #555E65;--border-secondary: #494F55;--disabled: #9DA4AE;--disabled-foreground: #F9FAFB;--disabled-control-disabled: #FFFFFF4C;--disabled-border-disabled: #9DA4AE;--input: #555E65;--ring: #0F0F0F;--divider: #555E65;--skeleton: #636F77;--radius: 12px;--text-default: #fff;--text-primary: var(--primary-400);--text-secondary: var(--secondary-400);--text-tertiary: var(--tertiary-400);--text-primary-sa-flag: var(--primary-100);--text-display: #F9FAFB;--text-paragraph-primary: #F3F4F6;--text-paragraph-secondary: #E5E7EB;--text-oncolor-primary: #fff;--text-oncolor-secondary: #161616CC;--text-oncolor-tertiary: #161616B2;--text-success: #47CD89;--text-info: #53B1FD;--text-warning: #FDB022;--text-error: #F97066;--text-primary-light: var(--primary-300);--text-secondary-light: var(--secondary-400);--text-tertiary-light: var(--tertiary-400);--text-default-disabled: #9DA4AE;--text-default-oncolor-disabled: #16161666;--text-form-title: var(--text-default);--text-form-paragraph: var(--text-paragraph-secondary);--field-text-label: var(--text-default);--field-text-placeholder: var(--text-paragraph-secondary);--field-text-hovered: var(--text-default);--field-text-focused: var(--text-paragraph-primary);--field-text-pressed: var(--text-paragraph-primary);--field-text-filled: var(--text-default);--field-text-readonly: var(--text-default);--field-text-helper: var(--text-paragraph-secondary);--field-background-default: #1F2A37;--field-background-lighter: #4D5761;--field-background-darker: #1F2A37;--field-background-pressed: #4D5761;--field-border-default: #6C737F;--field-border-hovered: #E5E7EB;--field-border-pressed: #FCFCFD;--border-primary: #6C737F;--border-secondary: #4D5761;--border-white: #161616;--border-white-40: #16161666;--border-black: #fff;--border-primary-default: var(--primary-600);--border-primary-light: var(--primary-200);--border-secondary-default: var(--secondary-600);--border-secondary-light: var(--secondary-200);--border-tertiary: var(--tertiary-500);--border-tertiary-light: var(--tertiary-200);--border-neutral-primary: #6C737F;--border-neutral-secondary: #384250;--border-neutral-tertiary: #1F2A37;--border-background-white: #4D5761;--border-background-neutral: #4D5761;--border-transparent-10: #16161619;--border-oncolor-transparent-30: #FFFFFF4C;--border-success: #17B26A;--border-success-light: #ABEFC6;--border-info: #175CD3;--border-info-light: #B2DDFF;--border-warning: #B54708;--border-warning-light: #FEDF89;--border-error: #B42318;--border-error-light: #FECDCA;--border-disabled: #6C737F;--control-primary: #16161600;--control-primary-checked: var(--primary-600);--control-primary-hovered: var(--primary-300);--control-primary-pressed: var(--primary-400);--control-primary-focused: var(--primary-600);--control-neutral-checked: #4D5761;--control-neutral-hovered: #9DA4AE;--control-neutral-pressed: #9DA4AE;--control-neutral-focused: #4D5761;--control-primary--readonly: #16161600;--control-pressed: #4D5761;--control-ripple-effect: #111927;--control-border: #9DA4AE;--control-icon-hovered: var(--primary-800);--control-icon-pressed: var(--primary-800);--control-icon-disabled: #9DA4AE;--control-border-disabled: #1616164C;--control-disabled: #D2D6DB;--tag-background-neutral: var(--primary-600);--tag-background-neutral-light: #1F2A37;--tag-background-on-color: #FFFFFF33;--tag-text-neutral: #F3F4F6;--tag-text-success: #085D3A;--tag-text-info: #1849A9;--tag-text-warning: #93370D;--tag-text-error: #912018;--tag-text-primary: var(--primary-800);--tag-text-secondary: var(--secondary-800);--tag-icon-primary: var(--primary-800);--tag-icon-secondary: var(--secondary-800);--tag-icon-tertiary: var(--tertiary-800);--tag-text-tertiary: var(--tertiary-800);--tag-icon-neutral: #F3F4F6;--tag-icon-success: #085D3A;--tag-icon-info: #1849A9;--tag-icon-warning: #93370D;--tag-icon-error: #912018;--tag-background-success: #067647;--tag-background-success-light: #ECFDF3;--tag-background-info: #1570EF;--tag-background-info-light: #EFF8FF;--tag-background-warning: #B54708;--tag-background-warning-light: #FFFAEB;--tag-background-error: #D92D20;--tag-background-error-light: #FEF3F2;--tag-background-primary: var(--primary-600);--tag-background-primary-light: var(--primary-50);--tag-background-secondary: var(--secondary-600);--tag-background-secondary-light: var(--secondary-50);--tag-background-tertiary: var(--tertiary-600);--tag-background-tertiary-light: var(--tertiary-50);--tag-border-neutral: #D2D6DB;--tag-border-neutral-light: #1F2A37;--tag-border-on-color: #FFFFFF99;--tag-border-success: #067647;--tag-border-success-light: #ABEFC6;--tag-border-info: #175CD3;--tag-border-info-light: #B2DDFF;--tag-border-warning: #B54708;--tag-border-warning-light: #FEDF89;--tag-border-error: #B42318;--tag-border-error-light: #FECDCA;--tag-border-primary: var(--primary-700);--tag-border-primary-light: var(--primary-200);--tag-border-secondary: var(--secondary-700);--tag-border-secondary-light: var(--secondary-200);--tag-border-tertiary: var(--tertiary-700);--tag-border-tertiary-light: var(--tertiary-200);--tag-dot: #FFFFFF99;--icon-oncolor: #fff;--icon-default: #fff;--icon-default-500: #E5E7EB;--icon-default-400: #6C737F;--icon-primary: var(--primary-400);--icon-primary-light: var(--primary-50);--icon-primary-400: var(--primary-200);--icon-neutral: #9DA4AE;--icon-neutral-light: #0D121C;--icon-secondary: var(--secondary-400);--icon-secondary-light: var(--secondary-50);--icon-tertiary: var(--tertiary-400);--icon-tertiary-light: var(--tertiary-50);--icon-success: #47CD89;--icon-success-light: #ECFDF3;--icon-info: #53B1FD;--icon-info-light: #EFF8FF;--icon-warning: #FDB022;--icon-warning-light: #FFFAEB;--icon-error: #F97066;--icon-error-light: #FEF3F2;--background-warning-light: var(--background-warning-10);--background-error-light: var(--background-error-10);--background-primary-light: var(--background-primary-10);--background-info-light: var(--background-info-10);--background-success-light: var(--background-success-10);--unselected-tab-icon: #F3F4F6;--icon-default-disabled: #fff;--icon-default-oncolor-disabled: #fff;--background-white: #0D121C;--background-body: #111927;--background-menu: #1F2A37;--background-muted: #384250;--background-card: #1F2A37;--surface-oncolor: #fff;--background-black: #fff;--background-neutral-800: #4D5761;--background-neutral-400: #9DA4AE;--background-neutral-300: #6C737F;--background-neutral-200: #4D5761;--background-neutral-100: #1F2A37;--background-neutral-50: #111927;--background-neutral-25: #0D121C;--background-primary: var(--primary-600);--background-primary-400: var(--primary-400);--background-primary-200: #384250;--background-primary-50: #1B83541A;--background-primary-25: var(--primary-950);--background-secondary-default: var(--secondary-600);--background-secondary-50: #1F2A37;--background-secondary-25: #111927;--background-tertiary: var(--tertiary-600);--background-tertiary-50: #1F2A37;--background-tertiary-25: #111927;--background-success: #079455;--background-success-50: #07945533;--background-success-25: #1B83541A;--background-info: #1570EF;--background-info-50: #EFF8FF;--background-info-25: #F5FAFF;--background-warning: #DC6803;--background-warning-50: #DC680333;--background-warning-25: #DC68031A;--background-error: #D92D20;--background-error-50: #D92D2033;--background-error-25: #D92D201A;--background-SA-Flag: #079455;--background-SA-Flag-50: #1F2A37;--background-SA-Flag-25: #111927;--background-notification-white: #111927;--background-nav-header: var(--primary-800);--background-disabled: #384250;--background-disabled-primary: var(--primary-200);--background-inverse-disabled: #384250;--background-neutral-default: #1F2A37;--background-neutral-hovered: #384250;--background-neutral-pressed: #4D5761;--background-neutral-selected: #384250;--background-neutral-focused: #1F2A37;--background-oncolor-default: #161616;--background-oncolor-hovered: #161616CC;--background-oncolor-pressed: #16161699;--background-oncolor-selected: #161616B2;--background-oncolor-focused: #161616;--background-transparent-default: #16161600;--background-transparent-hovered: #16161633;--background-transparent-pressed: #16161666;--background-transparent-selected: #1616164C;--background-transparent-focused: #16161600;--background-disabled-oncolor: #16161633;--link-neutral: #E5E7EB;--link-neutral-hovered: #9DA4AE;--link-neutral-visited: #D2D6DB;--link-neutral-focused: #E5E7EB;--link-neutral-pressed: #6C737F;--link-icon-neutral-hovered: #9DA4AE;--link-icon-neutral-pressed: #6C737F;--link-icon-neutral-focused: #E5E7EB;--link-icon-neutral-visited: #D2D6DB;--link-icon-oncolor-hovered: #161616CC;--link-icon-oncolor-pressed: #16161699;--link-icon-oncolor-visited: #161616E5;--link-icon-oncolor-disabled: #1616164C}*{border-color:var(--border)}html{scroll-behavior:smooth;font-size:55%}@media (min-width: 640px){html{font-size:62.5%}}body{background-color:var(--card);font-family:IBM Plex Sans Arabic,ui-sans-serif,system-ui;font-size:1.6rem;color:var(--foreground)}input:-webkit-autofill,input:-webkit-autofill:focus{-webkit-transition:background-color 0s 600000s,color 0s 600000s!important;transition:background-color 0s 600000s,color 0s 600000s!important}.title-01{font-size:2rem;line-height:2.8rem}@media (min-width: 1024px){.title-01{font-size:2.4rem;line-height:3.2rem}}.title-02{font-size:2.4rem;font-weight:700;line-height:3.2rem}@media (min-width: 1024px){.title-02{font-size:3.2rem;line-height:4rem}}.title-03{font-size:2.8rem;line-height:3.6rem}@media (min-width: 768px){.title-03{font-size:4rem;line-height:5.2rem}}@media (min-width: 1024px){.title-03{font-size:4.8rem;line-height:6rem}}.display-01{font-size:4rem;font-weight:700;line-height:5.2rem}@media (min-width: 1024px){.display-01{font-size:4.8rem;line-height:6.2rem}}@media (min-width: 1280px){.display-01{font-size:6.4rem;line-height:8.8rem}}.display-02{font-size:4.2rem;font-weight:700;line-height:5.4rem}@media (min-width: 768px){.display-02{font-size:5.4rem;line-height:7rem}}@media (min-width: 1024px){.display-02{font-size:8.4rem;line-height:9.8rem}}.dsgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}@media (min-width: 768px){.dsgrid{grid-template-columns:repeat(8,minmax(0,1fr))}}@media (min-width: 1024px){.dsgrid{grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}}.MuiButtonBase-root.MuiPickersDay-root{border-radius:8px;font-family:IBM Plex Sans Arabic,ui-sans-serif,system-ui;font-size:1.4rem;line-height:2rem}.MuiButtonBase-root.MuiPickersDay-root:hover{background-color:var(--primary-container)}.MuiButtonBase-root.MuiPickersDay-root:disabled{color:var(--disabled)!important}.MuiButtonBase-root.MuiPickersDay-root:is(.dark *){color:var(--foreground)}.MuiPickersCalendarHeader-label,.MuiDayCalendar-header .MuiTypography-caption.MuiDayCalendar-weekDayLabel{font-family:IBM Plex Sans Arabic,ui-sans-serif,system-ui}.MuiButtonBase-root.MuiPickersDay-root.Mui-selected,.MuiButtonBase-root.MuiPickersDay-root:focus.Mui-selected{background-color:var(--primary)}.MuiDayCalendar-header .MuiTypography-caption{font-size:1.2rem;line-height:1.6rem;color:var(--foreground-secondary)}.MuiPickersCalendarHeader-root{justify-content:space-between}.MuiPickersCalendarHeader-root>div{margin:0;font-size:1.4rem;line-height:2rem}.MuiButtonBase-root.MuiIconButton-root{font-size:1.4rem;line-height:2rem}.MuiButtonBase-root.MuiIconButton-root:is(.dark *){color:var(--foreground)}.MuiButtonBase-root.MuiIconButton-root:where([dir=ltr],[dir=ltr] *){--tw-rotate: 0deg !important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.MuiButtonBase-root.MuiIconButton-root:where([dir=rtl],[dir=rtl] *){--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.MuiPickersYear-root .MuiPickersYear-yearButton{font-size:1.4rem;line-height:2rem}.MuiPickersYear-root .MuiPickersYear-yearButton:hover{background-color:var(--primary-container)}.MuiPickersYear-root .MuiPickersYear-yearButton.Mui-selected{background-color:var(--primary)!important}.Mui-disabled.MuiPickersDay-today{border-color:transparent!important}.MuiButtonBase-root.MuiPickersDay-root.Mui-selected:hover{background-color:var(--primary-dark)!important}html[dir=ltr] .MuiDateCalendar-root{direction:ltr}html[dir=rtl] .MuiDateCalendar-root{direction:rtl}

package/tailwind.config.cjs

@@ -2,6 +2,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /** @type {import('tailwindcss').Config} */
 const plugin = require('tailwindcss/plugin')
+const { dgaToken } = require('./dga.config')
 module.exports = {
     darkMode: ['class'],
     content: ['./pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx,mdx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx,mdx}'],
@@ -30,28 +31,31 @@ module.exports = {
             backgroundImage: theme => ({
                 gradientPrimary: `linear-gradient(0deg, ${theme('colors.primary.dark')} 0%, ${theme('colors.primary.DEFAULT')} 100%)`,
                 HeaderGradient: `linear-gradient(180deg, ${theme('colors.primary.container')} -15%, ${theme('colors.card.DEFAULT')} 80%)`,
+                'gradient-neutral-60050090-deg': `linear-gradient(90deg, #475467 0%, #667085 100%)`,
+                'gradient-neutral-70060045-deg': `linear-gradient(45deg, #344054 0%, #475467 100%)`,
+                'gradient-neutral-80060045-deg': `linear-gradient(45deg, #182230 0%, #475467 100%))`,
+                'gradient-neutral-80060090-deg': `linear-gradient(63deg, #182230 16.72%, #475467 83.39%))`,
+                'gradient-neutral-800700265-deg': `linear-gradient(27deg, #182230 8.33%, #344054 91.67%))`,
+                'gradient-neutral-90060090-deg': `linear-gradient(45deg, #101828 0%, #475467 100%))`,
+                'gradient-brand-60050090-deg': `linear-gradient(90deg, ${theme('colors.cyan.600')} 0%, ${theme('colors.cyan.500')} 100%))`,
+                'gradient-brand-70060045-deg': `linear-gradient(45deg, ${theme('colors.cyan.700')} 0%, ${theme('colors.cyan.600')} 100%))`,
+                'gradient-brand-80060045-deg': `linear-gradient(45deg, ${theme('colors.cyan.800')} 0%, ${theme('colors.cyan.600')} 100%))`,
+                'gradient-brand-80060090-deg': `linear-gradient(63deg, ${theme('colors.cyan.800')} 16.72%, ${theme('colors.cyan.600')} 83.39%))`,
+                'gradient-brand-800700265-deg': `linear-gradient(27deg, ${theme('colors.cyan.800')} 8.33%, ${theme('colors.cyan.700')} 91.67%))`,
+                'gradient-brand-90060045-deg': `linear-gradient(45deg, ${theme('colors.cyan.900')} 0%, ${theme('colors.cyan.600')} 100%))`,
             }),
+            backdropBlur: {
+                sm: '4px',
+                md: '8px',
+                lg: '12px',
+                xl: '20px',
+            },
             colors: {
-                border: {
-                    DEFAULT: 'var(--border)',
-                    secondary: 'var(--border-secondary)',
-                },
-                background: {
-                    DEFAULT: 'var(--background)',
-                    secondary: 'var(--background-secondary)',
-                    overlay: 'var(--overlay)',
-                    foreground: 'var(--background-foreground)',
-                    brand: 'var(--background-brand)',
-                },
                 foreground: {
                     DEFAULT: 'var(--foreground)',
                     secondary: 'var(--foreground-secondary)',
                     tertiary: 'var(--foreground-tertiary)',
                 },
-                disabled: {
-                    DEFAULT: 'var(--disabled)',
-                    secondary: 'var(--disabled-foreground)',
-                },
                 primary: {
                     DEFAULT: 'var(--primary)',
                     foreground: 'var(--primary-foreground)',
@@ -143,6 +147,10 @@ module.exports = {
                 },
                 input: 'var(--input)',
                 ring: 'hsl(var(--ring))',
+
+                ...dgaToken,
+
+                black:"#161616",
                 gray: {
                     50: '#FAFAFA',
                     100: '#F9f9f9',
@@ -168,19 +176,35 @@ module.exports = {
                     800: '#313336',
                     900: '#242629',
                 },
+                neutral: {
+                    10: '#FFFFFF',
+                    25: '#FCFCFD',
+                    50: '#F9FAFB',
+                    100: '#F3F4F6',
+                    200: '#E5E7EB',
+                    300: '#D2D6DB',
+                    400: '#9DA4AE',
+                    500: '#6C737F',
+                    600: '#4D5761',
+                    700: '#384250',
+                    800: '#1F2A37',
+                    900: '#111927',
+                    950: '#0D121C',
+                },
                 lavender: {
                     10: '#FFFFFF',
-                    25: '#F9F8FC',
-                    50: '#F7F6FB',
-                    100: '#F0EEF9',
-                    200: '#E3DFF5',
-                    300: '#CFC6EC',
-                    400: '#B5A4E1',
-                    500: '#9A7FD4',
-                    600: '#8966C5',
-                    700: '#7751B0',
-                    800: '#644394',
-                    900: '#533979',
+                    25: '#FEFCFF',
+                    50: '#F9F5FA',
+                    100: '#F2E9F5',
+                    200: '#E1CCE8',
+                    300: '#CCADD9',
+                    400: '#A57BBA',
+                    500: '#80519F',
+                    600: '#6D428F',
+                    700: '#532D75',
+                    800: '#3D1D5E',
+                    900: '#281047',
+                    950: '#16072E',
                 },
                 middleBlue: {
                     10: '#FFFFFF',
@@ -197,40 +221,49 @@ module.exports = {
                     900: '#173D47',
                 },
                 blue: {
-                    50: '#F2F8FD',
-                    100: '#E4F0FA',
-                    200: '#C2E0F5',
-                    300: '#8DC7EC',
-                    400: '#50ABE0',
-                    500: '#2990CE',
-                    600: '#1A72AF',
-                    700: '#155685',
-                    800: '#164E76',
-                    900: '#184262',
+                    10: '#FFFFFF',
+                    25: '#F5FAFF',
+                    50: '#EFF8FF',
+                    100: '#D1E9FF',
+                    200: '#B2DDFF',
+                    300: '#84CAFF',
+                    400: '#53B1FD',
+                    500: '#2E90FA',
+                    600: '#1570EF',
+                    700: '#175CD3',
+                    800: '#1849A9',
+                    900: '#194185',
+                    950: '#102A56',
                 },
                 green: {
-                    50: '#E5F0E8',
-                    100: '#D5F5DE',
-                    200: '#BCDAC6',
-                    300: '#A5CDB2',
-                    400: '#8BBF9B',
-                    500: '#489961',
-                    600: '#398F54',
-                    700: '#2B6B3F',
-                    800: '#245934',
-                    900: '#1F4D2D',
+                    10: '#FFFFFF',
+                    25: '#F6FEF9',
+                    50: '#ECFDF3',
+                    100: '#DCFAE6',
+                    200: '#ABEFC6',
+                    300: '#75E0A7',
+                    400: '#47CD89',
+                    500: '#17B26A',
+                    600: '#079455',
+                    700: '#067647',
+                    800: '#085D3A',
+                    900: '#074D31',
+                    950: '#053321',
                 },
                 red: {
-                    50: '#FDF3F3',
-                    100: '#FCE4E4',
-                    200: '#FBCDCD',
-                    300: '#F7AAAA',
-                    400: '#F07979',
-                    500: '#E54E4E',
-                    600: '#CE2D2D',
-                    700: '#B02525',
-                    800: '#922222',
-                    900: '#7A2222',
+                    10: '#FFFFFF',
+                    25: '#FFFBFA',
+                    50: '#FEF3F2',
+                    100: '#FEE4E2',
+                    200: '#FECDCA',
+                    300: '#FDA29B',
+                    400: '#F97066',
+                    500: '#F04438',
+                    600: '#D92D20',
+                    700: '#B42318',
+                    800: '#912018',
+                    900: '#7A271A',
+                    950: '#55160C',
                 },
                 olivine: {
                     10: '#FFFFFF',
@@ -259,29 +292,49 @@ module.exports = {
                     900: '#194743',
                 },
                 marigold: {
-                    50: '#FFF8EB',
-                    100: '#FFF1D6',
-                    200: '#FEE2A9',
-                    300: '#FDCF72',
-                    400: '#FBBB3C',
-                    500: '#DB7712',
-                    600: '#B25E09',
-                    700: '#96530F',
-                    800: '#80460D',
-                    900: '#663B0F',
+                    10: '#FFFFFF',
+                    25: '#FFFCF5',
+                    50: '#FFFAEB',
+                    100: '#FEF0C7',
+                    200: '#FEDF89',
+                    300: '#FEC84B',
+                    400: '#FDB022',
+                    500: '#F79009',
+                    600: '#DC6803',
+                    700: '#B54708',
+                    800: '#93370D',
+                    900: '#7A2E0E',
+                    950: '#4E1D09',
+                },
+                gold: {
+                    10: '#FFFFFF',
+                    25: '#FFFEF7',
+                    50: '#FFFEF2',
+                    100: '#FFFCE6',
+                    200: '#FCF3BD',
+                    300: '#FAE996',
+                    400: '#F7D54D',
+                    500: '#F5BD02',
+                    600: '#DBA102',
+                    700: '#B87B02',
+                    800: '#945C01',
+                    900: '#6E3C00',
+                    950: '#472400',
                 },
                 cyan: {
-                    50: '#EEFBF6',
-                    25: '#F8FCFB',
-                    100: '#D6F5E7',
-                    200: '#B0EAD3',
-                    300: '#7CD9BA',
-                    400: '#46C19C',
-                    500: '#23A684',
-                    600: '#178F72',
-                    700: '#116B57',
-                    800: '#105547',
-                    900: '#0E463B',
+                    10: '#FFFFFF',
+                    25: '#F7FDF9',
+                    50: '#F3FCF6',
+                    100: '#DFF6E7',
+                    200: '#B8EACB',
+                    300: '#88D8AD',
+                    400: '#54C08A',
+                    500: '#25935F',
+                    600: '#1B8354',
+                    700: '#166A45',
+                    800: '#14573A',
+                    900: '#104631',
+                    950: '#092A1E',
                 },
                 azure: {
                     50: '#EAF3FB',
@@ -295,11 +348,65 @@ module.exports = {
                     800: '#184F77',
                     900: '#113651',
                 },
+                alpha: {
+                    'white-0': '#FFFFFF00',
+                    'black-0': '#16161600',
+                    'black-10': '#16161619',
+                    'black-20': '#16161633',
+                    'black-30': '#1616164C',
+                    'black-40': '#16161666',
+                    'black-50': '#1616167F',
+                    'black-60': '#16161699',
+                    'black-70': '#161616B2',
+                    'black-80': '#161616CC',
+                    'black-90': '#161616E5',
+                    'black-100': '#161616',
+                    'white-10': '#FFFFFF19',
+                    'white-20': '#FFFFFF33',
+                    'white-30': '#FFFFFF4C',
+                    'white-40': '#FFFFFF66',
+                    'white-50': '#FFFFFF7F',
+                    'white-60': '#FFFFFF99',
+                    'white-70': '#FFFFFFB2',
+                    'white-80': '#FFFFFFCC',
+                    'white-90': '#FFFFFFE5',
+                    'white-100': '#FFFFFF',
+                    'cyan-0': '#1B835400',
+                    'cyan-10': '#1B835419',
+                    'cyan-20': '#1B835433',
+                    'cyan-30': '#1B83544C',
+                    'cyan-40': '#1B835466',
+                    'cyan-50': '#1B83547F',
+                    'cyan-60': '#1B835499',
+                    'cyan-70': '#1B8354B2',
+                    'cyan-80': '#1B8354CC',
+                    'cyan-90': '#1B8354E5',
+                    //"cyan-100": var(--color-"cyan-600)",
+                    'green-10': '#07945519',
+                    'green-20': '#07945533',
+                    'blue-10': '#1570EF19',
+                    'blue-20': '#1570EF33',
+                    'red-10': '#D92D2019',
+                    'red-20': '#D92D2033',
+                    'marigold-10': '#DC680319',
+                    'marigold-20': '#DC680333',
+                    'Alpha-primary-10': '#1B83541A',
+                    'Alpha-primary-20': '#1B835433',
+                    'Alpha-warning-10': '#DC68031A',
+                    'Alpha-warning-20': '#DC680333',
+                    'Alpha-error-10': '#D92D201A',
+                    'Alpha-error-20': '#D92D2033',
+                    'Alpha-info-10': '#1570EF1A',
+                    'Alpha-info-20': '#1570EF33',
+                    'Alpha-success-10': '#0794551A',
+                    'Alpha-success-20': '#07945533',
+                },
             },
             borderRadius: {
                 lg: 'var(--radius)',
                 md: 'calc(var(--radius) - 2px)',
                 sm: 'calc(var(--radius) - 4px)',
+                0: '4px',
                 1: '8px',
                 2: '12px',
                 3: '16px',
@@ -363,12 +470,16 @@ module.exports = {
                 'surface-01': '0px 0px 8px 0px rgba(0,0,0,0.10)',
                 'card-shadow': '0px 0px 2px -1px rgba(0,0,0,0.10), 0px 1px 3px 0px rgba(0,0,0,0.10)',
                 'card-hover-02': '0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 1px 3px 0px rgba(0, 0, 0, 0.10)',
+                xs: '0px 1px 2px 0px rgba(16, 24, 40, 0.05)',
+                sm: '0px 1px 3px 0px rgba(16, 24, 40, 0.05), 0px 1px 2px 0px rgba(16, 24, 40, 0.05)',
+                md: '0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)',
+                lg: '0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03)',
+                xl: ' 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03)',
+                '2xl': '0px 24px 48px -12px rgba(16, 24, 40, 0.18)',
+                '3xl': ' 0px 32px 64px -12px rgba(16, 24, 40, 0.14)',
             },
             fontFamily: {
-                IBMReguler: ['IBM Reguler', 'ui-sans-serif', 'system-ui'],
-                NotoSans: ['Noto Sans', 'ui-sans-serif', 'system-ui'],
-                NotoKufiArabic: ['Noto Kufi Arabic', 'ui-sans-serif', 'system-ui'],
-                IBMBold: ['IBM Bold', 'ui-sans-serif', 'system-ui'],
+                IBMPlexSans: ['IBM Plex Sans Arabic', 'ui-sans-serif', 'system-ui'],
             },
         },
     },