@innovaccer/design-system 4.22.0 → 4.24.0

package/css/src/tokens/index.css

@@ -23,42 +23,42 @@
   --color-blue-1200-16a: rgba(0, 62, 133, 0.16);
 
   /* Red */
-  --color-red-100: #fff2f0;
-  --color-red-200: #ffddd6;
-  --color-red-300: #ffccc2;
-  --color-red-400: #ffb7a8;
-  --color-red-500: #fe9e8b;
-  --color-red-600: #fb866f;
-  --color-red-700: #f86b4f;
-  --color-red-800: #f54f2e;
-  --color-red-900: #f5310a;
-  --color-red-1000: #d62400;
-  --color-red-1100: #ad1d00;
-  --color-red-1200: #851600;
-  --color-red-1300: #611000;
-  --color-red-1400: #470c00;
-  --color-red-1000-4a: rgba(214, 36, 0, 0.04);
-  --color-red-1000-16a: rgba(214, 36, 0, 0.16);
-  --color-red-1200-16a: rgba(133, 22, 0, 0.16);
+  --color-red-100: #fff7f5;
+  --color-red-200: #ffe1db;
+  --color-red-300: #ffd4cc;
+  --color-red-400: #fec0b4;
+  --color-red-500: #fcac9c;
+  --color-red-600: #f49480;
+  --color-red-700: #ed765e;
+  --color-red-800: #e45b3f;
+  --color-red-900: #df3011;
+  --color-red-1000: #bd1c00;
+  --color-red-1100: #9e200a;
+  --color-red-1200: #791a06;
+  --color-red-1300: #5c1305;
+  --color-red-1400: #3f0e03;
+  --color-red-1000-4a: rgba(189, 28, 0, 0.04);
+  --color-red-1000-16a: rgba(189, 28, 0, 0.16);
+  --color-red-1200-16a: rgba(121, 26, 6, 0.16);
 
   /* Green */
-  --color-green-100: #deffdb;
-  --color-green-200: #c4fcc0;
-  --color-green-300: #a0f69d;
-  --color-green-400: #88ee87;
-  --color-green-500: #6be16d;
-  --color-green-600: #4fcf55;
-  --color-green-700: #27b933;
-  --color-green-800: #07a61a;
-  --color-green-900: #008f11;
-  --color-green-1000: #007a0e;
-  --color-green-1100: #00660c;
-  --color-green-1200: #00520a;
-  --color-green-1300: #004208;
-  --color-green-1400: #002e05;
-  --color-green-1000-4a: rgba(0, 122, 14, 0.04);
-  --color-green-1000-16a: rgba(0, 122, 14, 0.16);
-  --color-green-1200-16a: rgba(0, 82, 10, 0.16);
+  --color-green-100: #f1f9f0;
+  --color-green-200: #dcf0db;
+  --color-green-300: #cbe8c9;
+  --color-green-400: #b6dfb3;
+  --color-green-500: #9dd49b;
+  --color-green-600: #7ec57d;
+  --color-green-700: #5eb55e;
+  --color-green-800: #3aa63c;
+  --color-green-900: #009900;
+  --color-green-1000: #008000;
+  --color-green-1100: #006b00;
+  --color-green-1200: #005200;
+  --color-green-1300: #003d04;
+  --color-green-1400: #002904;
+  --color-green-1000-4a: rgba(0, 128, 0, 0.04);
+  --color-green-1000-16a: rgba(0, 128, 0, 0.16);
+  --color-green-1200-16a: rgba(0, 82, 0, 0.16);
 
   /* Yellow */
   --color-yellow-100: #fff9e5;
@@ -81,138 +81,138 @@
   --color-yellow-1100-16a: rgba(173, 130, 0, 0.16);
 
   /* Orange */
-  --color-orange-100: #fff2db;
-  --color-orange-200: #ffeccc;
-  --color-orange-300: #ffe0ad;
-  --color-orange-400: #ffce85;
-  --color-orange-500: #ffba61;
-  --color-orange-600: #ffaf4d;
-  --color-orange-700: #ffa238;
-  --color-orange-800: #ff931f;
-  --color-orange-900: #ff8000;
-  --color-orange-1000: #e56f00;
-  --color-orange-1100: #cc5f00;
-  --color-orange-1200: #b24d00;
-  --color-orange-1300: #7a2f00;
-  --color-orange-1400: #5c2200;
-  --color-orange-1000-4a: rgba(229, 111, 0, 0.04);
-  --color-orange-1000-16a: rgba(229, 111, 0, 0.16);
+  --color-orange-100: #ffeed1;
+  --color-orange-200: #ffe8c2;
+  --color-orange-300: #ffdca3;
+  --color-orange-400: #ffca7a;
+  --color-orange-500: #ffb657;
+  --color-orange-600: #ffa333;
+  --color-orange-700: #ff9114;
+  --color-orange-800: #eb7900;
+  --color-orange-900: #d66c00;
+  --color-orange-1000: #bd5b00;
+  --color-orange-1100: #a34c00;
+  --color-orange-1200: #8a3b00;
+  --color-orange-1300: #6b2900;
+  --color-orange-1400: #4d1c00;
+  --color-orange-1000-4a: rgba(189, 91, 0, 0.04);
+  --color-orange-1000-16a: rgba(189, 91, 0, 0.16);
 
   /* Violet */
-  --color-violet-100: #f7f0ff;
-  --color-violet-200: #ebdbff;
-  --color-violet-300: #dec7ff;
-  --color-violet-400: #d3b4fd;
-  --color-violet-500: #c7a0fd;
-  --color-violet-600: #b689fb;
-  --color-violet-700: #a771f9;
-  --color-violet-800: #9657f4;
-  --color-violet-900: #823aee;
-  --color-violet-1000: #6f21e4;
-  --color-violet-1100: #601ec2;
-  --color-violet-1200: #531ba7;
-  --color-violet-1300: #3e0e8b;
-  --color-violet-1400: #2b0868;
-  --color-violet-1000-16a: rgba(111, 33, 228, 0.16);
+  --color-violet-100: #faf6fe;
+  --color-violet-200: #f0e7fd;
+  --color-violet-300: #e4d5fb;
+  --color-violet-400: #dcc7fa;
+  --color-violet-500: #cfb4f8;
+  --color-violet-600: #c0a0f3;
+  --color-violet-700: #ac87ee;
+  --color-violet-800: #9e72e9;
+  --color-violet-900: #8854e8;
+  --color-violet-1000: #6f47cd;
+  --color-violet-1100: #5b3ba5;
+  --color-violet-1200: #462d80;
+  --color-violet-1300: #322361;
+  --color-violet-1400: #211844;
+  --color-violet-1000-16a: rgba(111, 71, 205, 0.16);
 
   /* Indigo */
-  --color-indigo-100: #f2f3fd;
-  --color-indigo-200: #daddfb;
-  --color-indigo-300: #c8ccf9;
-  --color-indigo-400: #bbc0f7;
-  --color-indigo-500: #a8aff5;
-  --color-indigo-600: #919af2;
-  --color-indigo-700: #7d86ed;
-  --color-indigo-800: #6873e8;
-  --color-indigo-900: #5460e3;
-  --color-indigo-1000: #3b48de;
-  --color-indigo-1100: #1f2ed6;
-  --color-indigo-1200: #1422b8;
-  --color-indigo-1300: #0d1677;
-  --color-indigo-1400: #0b1365;
-  --color-indigo-1000-16a: rgba(59, 72, 222, 0.16);
+  --color-indigo-100: #f5f6ff;
+  --color-indigo-200: #e5e8ff;
+  --color-indigo-300: #d6daff;
+  --color-indigo-400: #c7ccff;
+  --color-indigo-500: #b3baff;
+  --color-indigo-600: #9faafe;
+  --color-indigo-700: #8993fa;
+  --color-indigo-800: #7380f7;
+  --color-indigo-900: #5a67f6;
+  --color-indigo-1000: #4256d7;
+  --color-indigo-1100: #2f4aac;
+  --color-indigo-1200: #223987;
+  --color-indigo-1300: #192b66;
+  --color-indigo-1400: #101c46;
+  --color-indigo-1000-16a: rgba(66, 86, 215, 0.16);
 
   /* Lime */
-  --color-lime-100: #ecffd1;
-  --color-lime-200: #defcb0;
-  --color-lime-300: #cbf98b;
-  --color-lime-400: #b9f466;
-  --color-lime-500: #a7ef43;
-  --color-lime-600: #9aeb28;
-  --color-lime-700: #8ce114;
-  --color-lime-800: #7ecf0c;
-  --color-lime-900: #70bc06;
-  --color-lime-1000: #62a701;
-  --color-lime-1100: #508901;
-  --color-lime-1200: #3e6b00;
-  --color-lime-1300: #294600;
-  --color-lime-1400: #1b2e00;
-  --color-lime-900-16a: rgba(112, 188, 6, 0.16);
-  --color-lime-1000-16a: rgba(98, 167, 1, 0.16);
+  --color-lime-100: #f5faed;
+  --color-lime-200: #e4efd3;
+  --color-lime-300: #d5e6bb;
+  --color-lime-400: #c5dc9e;
+  --color-lime-500: #b2d07d;
+  --color-lime-600: #9dc057;
+  --color-lime-700: #87b018;
+  --color-lime-800: #779d00;
+  --color-lime-900: #688900;
+  --color-lime-1000: #577400;
+  --color-lime-1100: #476000;
+  --color-lime-1200: #364900;
+  --color-lime-1300: #283800;
+  --color-lime-1400: #1a2700;
+  --color-lime-900-16a: rgba(104, 137, 0, 0.16);
+  --color-lime-1000-16a: rgba(87, 116, 0, 0.16);
 
   /* Cyan */
-  --color-cyan-100: #dbfaff;
-  --color-cyan-200: #bdf5ff;
-  --color-cyan-300: #99eeff;
-  --color-cyan-400: #8beafd;
-  --color-cyan-500: #7ee6fb;
-  --color-cyan-600: #68def8;
-  --color-cyan-700: #52d6f4;
-  --color-cyan-800: #31cbf2;
-  --color-cyan-900: #15c3ef;
-  --color-cyan-1000: #0fabd2;
-  --color-cyan-1100: #0589ad;
-  --color-cyan-1200: #006280;
-  --color-cyan-1300: #003f52;
-  --color-cyan-1400: #00232e;
+  --color-cyan-100: #eefafc;
+  --color-cyan-200: #cff1f7;
+  --color-cyan-300: #b6e8f2;
+  --color-cyan-400: #96dfee;
+  --color-cyan-500: #6ed3e7;
+  --color-cyan-600: #33c4e1;
+  --color-cyan-700: #00b2d6;
+  --color-cyan-800: #009fc7;
+  --color-cyan-900: #008cb3;
+  --color-cyan-1000: #007599;
+  --color-cyan-1100: #006080;
+  --color-cyan-1200: #004766;
+  --color-cyan-1300: #003952;
+  --color-cyan-1400: #002738;
 
   /* Sea */
-  --color-sea-100: #ddfdfa;
-  --color-sea-200: #c4f8f3;
-  --color-sea-300: #a5f3ec;
-  --color-sea-400: #8ceee7;
-  --color-sea-500: #73e7e0;
-  --color-sea-600: #5ce0d7;
-  --color-sea-700: #45d9cf;
-  --color-sea-800: #23d7cb;
-  --color-sea-900: #16c0b7;
-  --color-sea-1000: #0ca79f;
-  --color-sea-1100: #04867f;
-  --color-sea-1200: #00615c;
-  --color-sea-1300: #00423f;
-  --color-sea-1400: #002927;
+  --color-sea-100: #effaf9;
+  --color-sea-200: #cff2ef;
+  --color-sea-300: #b8eae5;
+  --color-sea-400: #98e2dc;
+  --color-sea-500: #6fd8d2;
+  --color-sea-600: #2fcac0;
+  --color-sea-700: #00b8ae;
+  --color-sea-800: #00a89d;
+  --color-sea-900: #008f88;
+  --color-sea-1000: #007a74;
+  --color-sea-1100: #00665f;
+  --color-sea-1200: #004d47;
+  --color-sea-1300: #003d3a;
+  --color-sea-1400: #002926;
 
   /* Magenta */
-  --color-magenta-100: #fff0f5;
-  --color-magenta-200: #ffdbe8;
-  --color-magenta-300: #ffc2d8;
-  --color-magenta-400: #ffadcb;
-  --color-magenta-500: #ff99c0;
-  --color-magenta-600: #ff85b4;
-  --color-magenta-700: #fe71a7;
-  --color-magenta-800: #fc5a98;
-  --color-magenta-900: #fa428c;
-  --color-magenta-1000: #f7267a;
-  --color-magenta-1100: #e40763;
-  --color-magenta-1200: #b00753;
-  --color-magenta-1300: #850040;
-  --color-magenta-1400: #520029;
+  --color-magenta-100: #fff5f9;
+  --color-magenta-200: #fee1eb;
+  --color-magenta-300: #fccfdf;
+  --color-magenta-400: #fabdd2;
+  --color-magenta-500: #f6a7c4;
+  --color-magenta-600: #ef8fb2;
+  --color-magenta-700: #e7739e;
+  --color-magenta-800: #de5487;
+  --color-magenta-900: #d62974;
+  --color-magenta-1000: #bb165b;
+  --color-magenta-1100: #991a44;
+  --color-magenta-1200: #751538;
+  --color-magenta-1300: #5a112d;
+  --color-magenta-1400: #3d0b20;
 
   /* Pink */
-  --color-pink-100: #fff0fd;
-  --color-pink-200: #ffe0fb;
-  --color-pink-300: #ffd1f9;
-  --color-pink-400: #ffc7f7;
-  --color-pink-500: #febdf7;
-  --color-pink-600: #fdaff5;
-  --color-pink-700: #fca1f6;
-  --color-pink-800: #f88cf2;
-  --color-pink-900: #f47cf2;
-  --color-pink-1000: #ed68ed;
-  --color-pink-1100: #d016d0;
-  --color-pink-1200: #ae09ae;
-  --color-pink-1300: #510151;
-  --color-pink-1400: #410c40;
+  --color-pink-100: #fdf6fc;
+  --color-pink-200: #f8e2f5;
+  --color-pink-300: #f3d3ef;
+  --color-pink-400: #efc2e9;
+  --color-pink-500: #e7ace1;
+  --color-pink-600: #dd92d5;
+  --color-pink-700: #d17acd;
+  --color-pink-800: #c55ec1;
+  --color-pink-900: #b83db8;
+  --color-pink-1000: #9d2d9f;
+  --color-pink-1100: #842a82;
+  --color-pink-1200: #651f64;
+  --color-pink-1300: #4e184d;
+  --color-pink-1400: #371036;
 
   /* Gray */
   --color-gray-100: #f7f7f7;
@@ -263,7 +263,7 @@
   /* Accent 2 (Violet) */
   --jamun: var(--color-violet-1000);
   --jamun-dark: var(--color-violet-1200);
-  --jamun-darker: var(--color-violet-1400);
+  --jamun-darker: var(--color-violet-1300);
   --jamun-light: var(--color-violet-700);
   --jamun-lighter: var(--color-violet-500);
   --jamun-lightest: var(--color-violet-200);
@@ -279,7 +279,7 @@
   /* Accent 3 (Indigo) */
   --neel: var(--color-indigo-1000);
   --neel-dark: var(--color-indigo-1200);
-  --neel-darker: var(--color-indigo-1400);
+  --neel-darker: var(--color-indigo-1300);
   --neel-light: var(--color-indigo-700);
   --neel-lighter: var(--color-indigo-500);
   --neel-lightest: var(--color-indigo-200);
@@ -299,8 +299,8 @@
   --night-lightest: var(--color-gray-700);
 
   /* Accent 4 (Lime) */
-  --nimbu: var(--color-lime-900);
-  --nimbu-dark: var(--color-lime-1100);
+  --nimbu: var(--color-lime-1000);
+  --nimbu-dark: var(--color-lime-1200);
   --nimbu-darker: var(--color-lime-1300);
   --nimbu-light: var(--color-lime-700);
   --nimbu-lighter: var(--color-lime-500);

package/css/src/utils/utility.css

@@ -35,6 +35,10 @@
   white-space: pre;
 }
 
+.white-space-pre-wrap {
+  white-space: pre-wrap;
+}
+
 .bottom-0 {
   bottom: 0;
 }

package/css/src/variables/index.css

@@ -11,6 +11,10 @@
   --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);
 
   /* dark */
@@ -23,6 +27,10 @@
   --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);
 
   /* darker */
   --primary-darker: var(--jal-darker);
@@ -33,6 +41,10 @@
   --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);
 
   /* light */
   --primary-light: var(--jal-light);
@@ -44,6 +56,10 @@
   --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);
 
   /* lighter */
@@ -56,6 +72,10 @@
   --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);
 
   /* lightest */
@@ -68,6 +88,10 @@
   --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);
 
   /* Focus */
@@ -83,16 +107,103 @@
   --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);
 
-  /* Avatar specific color for the time being */
+  /* 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);
+
+  /* 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);
 
   /* shadow */
   --primary-shadow: color-mod(var(--primary) a(var(--opacity-4)));
@@ -104,6 +215,10 @@
   --accent2-shadow: color-mod(var(--accent2) a(var(--opacity-4)));
   --accent3-shadow: color-mod(var(--accent3) a(var(--opacity-4)));
   --accent4-shadow: color-mod(var(--accent4) a(var(--opacity-4)));
+  --accent5-shadow: color-mod(var(--accent5) a(var(--opacity-4)));
+  --accent6-shadow: color-mod(var(--accent6) a(var(--opacity-4)));
+  --accent7-shadow: color-mod(var(--accent7) a(var(--opacity-4)));
+  --accent8-shadow: color-mod(var(--accent8) a(var(--opacity-4)));
   --inverse-shadow: color-mod(var(--inverse) a(var(--opacity-4)));
 
   /* Text colors */