@innovaccer/design-system 4.28.0-1 → 4.28.0

package/css/src/variables/index.css

@@ -2,208 +2,208 @@
   /* Colors */
 
   /* default */
-  --primary: var(--jal);
-  --secondary: var(--stone);
-  --success: var(--neem);
-  --alert: var(--mirch);
-  --warning: var(--haldi);
-  --accent1: var(--tawak);
-  --accent2: var(--jamun);
-  --accent3: var(--neel);
-  --accent4: var(--nimbu);
-  --accent5: var(--color-cyan-1000);
-  --accent6: var(--color-magenta-1000);
-  --accent7: var(--color-sea-1000);
-  --accent8: var(--color-pink-1000);
-  --inverse: var(--night);
+  --primary: var(--color-blue-900);
+  --secondary: var(--color-neutral-300);
+  --success: var(--color-green-900);
+  --alert: var(--color-red-900);
+  --warning: var(--color-yellow-800);
+  --accent1: var(--color-orange-900);
+  --accent2: var(--color-violet-900);
+  --accent3: var(--color-indigo-900);
+  --accent4: var(--color-lime-900);
+  --accent5: var(--color-cyan-900);
+  --accent6: var(--color-pink-900);
+  --accent7: var(--color-teal-900);
+  --accent8: var(--color-fuchsia-900);
+  --inverse: var(--color-neutral-1200);
 
   /* dark */
-  --primary-dark: var(--jal-dark);
-  --secondary-dark: var(--stone-dark);
-  --success-dark: var(--neem-dark);
-  --alert-dark: var(--mirch-dark);
-  --warning-dark: var(--haldi-dark);
-  --accent1-dark: var(--tawak-dark);
-  --accent2-dark: var(--jamun-dark);
-  --accent3-dark: var(--neel-dark);
-  --accent4-dark: var(--nimbu-dark);
-  --accent5-dark: var(--color-cyan-1200);
-  --accent6-dark: var(--color-magenta-1200);
-  --accent7-dark: var(--color-sea-1200);
-  --accent8-dark: var(--color-pink-1200);
+  --primary-dark: var(--color-blue-1000);
+  --secondary-dark: var(--color-neutral-400);
+  --success-dark: var(--color-green-1000);
+  --alert-dark: var(--color-red-1000);
+  --warning-dark: var(--color-yellow-950);
+  --accent1-dark: var(--color-orange-1000);
+  --accent2-dark: var(--color-violet-1000);
+  --accent3-dark: var(--color-indigo-1000);
+  --accent4-dark: var(--color-lime-1000);
+  --accent5-dark: var(--color-cyan-1000);
+  --accent6-dark: var(--color-pink-1000);
+  --accent7-dark: var(--color-teal-1000);
+  --accent8-dark: var(--color-fuchsia-1000);
 
   /* darker */
-  --primary-darker: var(--jal-darker);
-  --success-darker: var(--neem-darker);
-  --alert-darker: var(--mirch-darker);
-  --warning-darker: var(--haldi-darker);
-  --accent1-darker: var(--tawak-darker);
-  --accent2-darker: var(--jamun-darker);
-  --accent3-darker: var(--neel-darker);
-  --accent4-darker: var(--nimbu-darker);
-  --accent5-darker: var(--color-cyan-1300);
-  --accent6-darker: var(--color-magenta-1300);
-  --accent7-darker: var(--color-sea-1300);
-  --accent8-darker: var(--color-pink-1300);
+  --primary-darker: var(--color-blue-1100);
+  --success-darker: var(--color-green-1100);
+  --alert-darker: var(--color-red-1100);
+  --warning-darker: var(--color-yellow-1100);
+  --accent1-darker: var(--color-orange-1100);
+  --accent2-darker: var(--color-violet-1100);
+  --accent3-darker: var(--color-indigo-1100);
+  --accent4-darker: var(--color-lime-1100);
+  --accent5-darker: var(--color-cyan-1100);
+  --accent6-darker: var(--color-pink-1100);
+  --accent7-darker: var(--color-teal-1100);
+  --accent8-darker: var(--color-fuchsia-1100);
 
   /* light */
-  --primary-light: var(--jal-light);
-  --secondary-light: var(--stone-light);
-  --success-light: var(--neem-light);
-  --alert-light: var(--mirch-light);
-  --warning-light: var(--haldi-light);
-  --accent1-light: var(--tawak-light);
-  --accent2-light: var(--jamun-light);
-  --accent3-light: var(--neel-light);
-  --accent4-light: var(--nimbu-light);
-  --accent5-light: var(--color-cyan-700);
-  --accent6-light: var(--color-magenta-700);
-  --accent7-light: var(--color-sea-700);
-  --accent8-light: var(--color-pink-700);
-  --inverse-light: var(--night-light);
+  --primary-light: var(--color-blue-600);
+  --secondary-light: var(--color-neutral-200);
+  --success-light: var(--color-green-600);
+  --alert-light: var(--color-red-600);
+  --warning-light: var(--color-yellow-600);
+  --accent1-light: var(--color-orange-600);
+  --accent2-light: var(--color-violet-600);
+  --accent3-light: var(--color-indigo-600);
+  --accent4-light: var(--color-lime-600);
+  --accent5-light: var(--color-cyan-600);
+  --accent6-light: var(--color-pink-600);
+  --accent7-light: var(--color-teal-600);
+  --accent8-light: var(--color-fuchsia-600);
+  --inverse-light: var(--color-neutral-950);
 
   /* lighter */
-  --primary-lighter: var(--jal-lighter);
-  --secondary-lighter: var(--stone-lighter);
-  --success-lighter: var(--neem-lighter);
-  --alert-lighter: var(--mirch-lighter);
-  --warning-lighter: var(--haldi-lighter);
-  --accent1-lighter: var(--tawak-lighter);
-  --accent2-lighter: var(--jamun-lighter);
-  --accent3-lighter: var(--neel-lighter);
-  --accent4-lighter: var(--nimbu-lighter);
-  --accent5-lighter: var(--color-cyan-500);
-  --accent6-lighter: var(--color-magenta-500);
-  --accent7-lighter: var(--color-sea-500);
-  --accent8-lighter: var(--color-pink-500);
-  --inverse-lighter: var(--night-lighter);
+  --primary-lighter: var(--color-blue-400);
+  --secondary-lighter: var(--color-neutral-100);
+  --success-lighter: var(--color-green-400);
+  --alert-lighter: var(--color-red-400);
+  --warning-lighter: var(--color-yellow-400);
+  --accent1-lighter: var(--color-orange-400);
+  --accent2-lighter: var(--color-violet-400);
+  --accent3-lighter: var(--color-indigo-400);
+  --accent4-lighter: var(--color-lime-400);
+  --accent5-lighter: var(--color-cyan-400);
+  --accent6-lighter: var(--color-pink-400);
+  --accent7-lighter: var(--color-teal-400);
+  --accent8-lighter: var(--color-fuchsia-400);
+  --inverse-lighter: var(--color-neutral-800);
 
   /* lightest */
-  --primary-lightest: var(--jal-lightest);
-  --secondary-lightest: var(--stone-lightest);
-  --success-lightest: var(--neem-lightest);
-  --alert-lightest: var(--mirch-lightest);
-  --warning-lightest: var(--haldi-lightest);
-  --accent1-lightest: var(--tawak-lightest);
-  --accent2-lightest: var(--jamun-lightest);
-  --accent3-lightest: var(--neel-lightest);
-  --accent4-lightest: var(--nimbu-lightest);
-  --accent5-lightest: var(--color-cyan-200);
-  --accent6-lightest: var(--color-magenta-200);
-  --accent7-lightest: var(--color-sea-200);
-  --accent8-lightest: var(--color-pink-200);
-  --inverse-lightest: var(--night-lightest);
+  --primary-lightest: var(--color-blue-100);
+  --secondary-lightest: var(--color-neutral-50);
+  --success-lightest: var(--color-green-100);
+  --alert-lightest: var(--color-red-100);
+  --warning-lightest: var(--color-yellow-100);
+  --accent1-lightest: var(--color-orange-100);
+  --accent2-lightest: var(--color-violet-100);
+  --accent3-lightest: var(--color-indigo-100);
+  --accent4-lightest: var(--color-lime-100);
+  --accent5-lightest: var(--color-cyan-100);
+  --accent6-lightest: var(--color-pink-100);
+  --accent7-lightest: var(--color-teal-100);
+  --accent8-lightest: var(--color-fuchsia-100);
+  --inverse-lightest: var(--color-neutral-600);
 
   /* Focus */
   --primary-focus: var(--primary-dark);
-  --inverse-focus: var(--night);
+  --inverse-focus: var(--color-neutral-1200);
 
   /* Ultra Light */
-  --primary-ultra-light: var(--color-blue-100);
-  --success-ultra-light: var(--color-green-100);
-  --alert-ultra-light: var(--color-red-100);
-  --warning-ultra-light: var(--color-yellow-100);
-  --accent1-ultra-light: var(--color-orange-100);
-  --accent2-ultra-light: var(--color-violet-100);
-  --accent3-ultra-light: var(--color-indigo-100);
-  --accent4-ultra-light: var(--color-lime-100);
-  --accent5-ultra-light: var(--color-cyan-100);
-  --accent6-ultra-light: var(--color-magenta-100);
-  --accent7-ultra-light: var(--color-sea-100);
-  --accent8-ultra-light: var(--color-pink-100);
+  --primary-ultra-light: var(--color-blue-50);
+  --success-ultra-light: var(--color-green-50);
+  --alert-ultra-light: var(--color-red-50);
+  --warning-ultra-light: var(--color-yellow-50);
+  --accent1-ultra-light: var(--color-orange-50);
+  --accent2-ultra-light: var(--color-violet-50);
+  --accent3-ultra-light: var(--color-indigo-50);
+  --accent4-ultra-light: var(--color-lime-50);
+  --accent5-ultra-light: var(--color-cyan-50);
+  --accent6-ultra-light: var(--color-pink-50);
+  --accent7-ultra-light: var(--color-teal-50);
+  --accent8-ultra-light: var(--color-fuchsia-50);
 
   /* Numeric semantic steps */
-  --primary-300: var(--color-blue-300);
-  --primary-400: var(--color-blue-400);
-  --primary-600: var(--color-blue-600);
-  --primary-800: var(--color-blue-800);
-  --primary-900: var(--color-blue-900);
-  --primary-1100: var(--color-blue-1100);
-  --primary-1400: var(--color-blue-1400);
-  --success-300: var(--color-green-300);
-  --success-400: var(--color-green-400);
-  --success-600: var(--color-green-600);
-  --success-800: var(--color-green-800);
-  --success-900: var(--color-green-900);
-  --success-1100: var(--color-green-1100);
-  --success-1400: var(--color-green-1400);
-  --alert-300: var(--color-red-300);
-  --alert-400: var(--color-red-400);
-  --alert-600: var(--color-red-600);
-  --alert-800: var(--color-red-800);
-  --alert-900: var(--color-red-900);
-  --alert-1100: var(--color-red-1100);
-  --alert-1400: var(--color-red-1400);
-  --warning-300: var(--color-yellow-300);
-  --warning-400: var(--color-yellow-400);
-  --warning-600: var(--color-yellow-600);
-  --warning-800: var(--color-yellow-800);
-  --warning-1000: var(--color-yellow-1000);
-  --warning-1200: var(--color-yellow-1200);
-  --warning-1400: var(--color-yellow-1400);
-  --accent1-300: var(--color-orange-300);
-  --accent1-400: var(--color-orange-400);
-  --accent1-600: var(--color-orange-600);
-  --accent1-800: var(--color-orange-800);
-  --accent1-900: var(--color-orange-900);
-  --accent1-1100: var(--color-orange-1100);
-  --accent1-1400: var(--color-orange-1400);
-  --accent2-300: var(--color-violet-300);
-  --accent2-400: var(--color-violet-400);
-  --accent2-600: var(--color-violet-600);
-  --accent2-800: var(--color-violet-800);
-  --accent2-900: var(--color-violet-900);
-  --accent2-1100: var(--color-violet-1100);
-  --accent2-1400: var(--color-violet-1400);
-  --accent3-300: var(--color-indigo-300);
-  --accent3-400: var(--color-indigo-400);
-  --accent3-600: var(--color-indigo-600);
-  --accent3-800: var(--color-indigo-800);
-  --accent3-900: var(--color-indigo-900);
-  --accent3-1100: var(--color-indigo-1100);
-  --accent3-1400: var(--color-indigo-1400);
-  --accent4-300: var(--color-lime-300);
-  --accent4-400: var(--color-lime-400);
-  --accent4-600: var(--color-lime-600);
-  --accent4-800: var(--color-lime-800);
-  --accent4-900: var(--color-lime-900);
-  --accent4-1100: var(--color-lime-1100);
-  --accent4-1400: var(--color-lime-1400);
-  --accent5-300: var(--color-cyan-300);
-  --accent5-400: var(--color-cyan-400);
-  --accent5-600: var(--color-cyan-600);
-  --accent5-800: var(--color-cyan-800);
-  --accent5-900: var(--color-cyan-900);
-  --accent5-1100: var(--color-cyan-1100);
-  --accent5-1400: var(--color-cyan-1400);
-  --accent6-300: var(--color-magenta-300);
-  --accent6-400: var(--color-magenta-400);
-  --accent6-600: var(--color-magenta-600);
-  --accent6-800: var(--color-magenta-800);
-  --accent6-900: var(--color-magenta-900);
-  --accent6-1100: var(--color-magenta-1100);
-  --accent6-1400: var(--color-magenta-1400);
-  --accent7-300: var(--color-sea-300);
-  --accent7-400: var(--color-sea-400);
-  --accent7-600: var(--color-sea-600);
-  --accent7-800: var(--color-sea-800);
-  --accent7-900: var(--color-sea-900);
-  --accent7-1100: var(--color-sea-1100);
-  --accent7-1400: var(--color-sea-1400);
-  --accent8-300: var(--color-pink-300);
-  --accent8-400: var(--color-pink-400);
-  --accent8-600: var(--color-pink-600);
-  --accent8-800: var(--color-pink-800);
-  --accent8-900: var(--color-pink-900);
-  --accent8-1100: var(--color-pink-1100);
-  --accent8-1400: var(--color-pink-1400);
+  --primary-300: var(--color-blue-200);
+  --primary-400: var(--color-blue-300);
+  --primary-600: var(--color-blue-500);
+  --primary-800: var(--color-blue-700);
+  --primary-900: var(--color-blue-800);
+  --primary-1100: var(--color-blue-950);
+  --primary-1400: var(--color-blue-1200);
+  --success-300: var(--color-green-200);
+  --success-400: var(--color-green-300);
+  --success-600: var(--color-green-500);
+  --success-800: var(--color-green-700);
+  --success-900: var(--color-green-800);
+  --success-1100: var(--color-green-950);
+  --success-1400: var(--color-green-1200);
+  --alert-300: var(--color-red-200);
+  --alert-400: var(--color-red-300);
+  --alert-600: var(--color-red-500);
+  --alert-800: var(--color-red-700);
+  --alert-900: var(--color-red-800);
+  --alert-1100: var(--color-red-950);
+  --alert-1400: var(--color-red-1200);
+  --warning-300: var(--color-yellow-200);
+  --warning-400: var(--color-yellow-300);
+  --warning-600: var(--color-yellow-500);
+  --warning-800: var(--color-yellow-700);
+  --warning-1000: var(--color-yellow-900);
+  --warning-1200: var(--color-yellow-1000);
+  --warning-1400: var(--color-yellow-1200);
+  --accent1-300: var(--color-orange-200);
+  --accent1-400: var(--color-orange-300);
+  --accent1-600: var(--color-orange-500);
+  --accent1-800: var(--color-orange-700);
+  --accent1-900: var(--color-orange-800);
+  --accent1-1100: var(--color-orange-950);
+  --accent1-1400: var(--color-orange-1200);
+  --accent2-300: var(--color-violet-200);
+  --accent2-400: var(--color-violet-300);
+  --accent2-600: var(--color-violet-500);
+  --accent2-800: var(--color-violet-700);
+  --accent2-900: var(--color-violet-800);
+  --accent2-1100: var(--color-violet-950);
+  --accent2-1400: var(--color-violet-1200);
+  --accent3-300: var(--color-indigo-200);
+  --accent3-400: var(--color-indigo-300);
+  --accent3-600: var(--color-indigo-500);
+  --accent3-800: var(--color-indigo-700);
+  --accent3-900: var(--color-indigo-800);
+  --accent3-1100: var(--color-indigo-950);
+  --accent3-1400: var(--color-indigo-1200);
+  --accent4-300: var(--color-lime-200);
+  --accent4-400: var(--color-lime-300);
+  --accent4-600: var(--color-lime-500);
+  --accent4-800: var(--color-lime-700);
+  --accent4-900: var(--color-lime-800);
+  --accent4-1100: var(--color-lime-950);
+  --accent4-1400: var(--color-lime-1200);
+  --accent5-300: var(--color-cyan-200);
+  --accent5-400: var(--color-cyan-300);
+  --accent5-600: var(--color-cyan-500);
+  --accent5-800: var(--color-cyan-700);
+  --accent5-900: var(--color-cyan-800);
+  --accent5-1100: var(--color-cyan-950);
+  --accent5-1400: var(--color-cyan-1200);
+  --accent6-300: var(--color-pink-200);
+  --accent6-400: var(--color-pink-300);
+  --accent6-600: var(--color-pink-500);
+  --accent6-800: var(--color-pink-700);
+  --accent6-900: var(--color-pink-800);
+  --accent6-1100: var(--color-pink-950);
+  --accent6-1400: var(--color-pink-1200);
+  --accent7-300: var(--color-teal-200);
+  --accent7-400: var(--color-teal-300);
+  --accent7-600: var(--color-teal-500);
+  --accent7-800: var(--color-teal-700);
+  --accent7-900: var(--color-teal-800);
+  --accent7-1100: var(--color-teal-950);
+  --accent7-1400: var(--color-teal-1200);
+  --accent8-300: var(--color-fuchsia-200);
+  --accent8-400: var(--color-fuchsia-300);
+  --accent8-600: var(--color-fuchsia-500);
+  --accent8-800: var(--color-fuchsia-700);
+  --accent8-900: var(--color-fuchsia-800);
+  --accent8-1100: var(--color-fuchsia-950);
+  --accent8-1400: var(--color-fuchsia-1200);
 
   /* Neutral semantic steps */
-  --secondary-600: var(--color-gray-600);
-  --inverse-800: var(--color-gray-800);
-  --inverse-1000: var(--color-gray-1000);
-  --inverse-1200: var(--color-gray-1200);
-  --inverse-1300: var(--color-gray-1300);
+  --secondary-600: var(--color-neutral-500);
+  --inverse-800: var(--color-neutral-700);
+  --inverse-1000: var(--color-neutral-900);
+  --inverse-1200: var(--color-neutral-1000);
+  --inverse-1300: var(--color-neutral-1100);
 
   /* shadow */
   --primary-shadow: color-mod(var(--primary) a(var(--opacity-4)));
@@ -222,8 +222,8 @@
   --inverse-shadow: color-mod(var(--inverse) a(var(--opacity-4)));
 
   /* Text colors */
-  --text: var(--night);
-  --text-subtle: var(--night-lighter);
+  --text: var(--inverse);
+  --text-subtle: var(--inverse-lighter);
   --text-link: var(--primary);
   --text-disabled: var(--inverse-lightest);
   --text-destructive: var(--alert);
@@ -302,10 +302,10 @@
   --shadow-l: 0 4px 16px 0 rgba(0, 0, 0, 0.16);
   --shadow-spread: 0 0 0 3px;
 
-  /* 
+  /*
   Grid breakpoints
   Define the minimum dimensions at which your layout will change,
-  adapting to different screen sizes, for use in media queries. 
+  adapting to different screen sizes, for use in media queries.
   */
 
   --grid-s-breakpoint: 576px;
@@ -313,9 +313,9 @@
   --grid-l-breakpoint: 992px;
   --grid-xl-breakpoint: 1200px;
 
-  /* 
+  /*
   Grid columns
-  Set the number of columns and specify the width of the gutters. 
+  Set the number of columns and specify the width of the gutters.
   */
 
   --grid-columns: 12;