@innovaccer/design-system 2.13.3 → 2.13.4-2

package/docs/src/pages/foundations/colors.mdx

@@ -16,70 +16,109 @@ export const PRIMARY_COLORS = [
     name: 'Jal - Dark',
     backgroundColor: 'var(--primary-dark)',
     hexCode: '#00509F',
-    colorCode: 'rgb(0, 51, 101)',
+    colorCode: 'rgb(0, 80, 159)',
   },
   {
     name: 'Jal - Default',
     backgroundColor: 'var(--primary)',
     hexCode: '#0070DD',
-    colorCode: 'rgb(0, 51, 101)',
+    colorCode: 'rgb(0, 112, 221)',
   },
   {
     name: 'Jal - Light',
     backgroundColor: 'var(--primary-light)',
     hexCode: '#4F9DE7',
-    colorCode: 'rgb(0, 51, 101)',
+    colorCode: 'rgb(79, 157, 231)',
   },
   {
     name: 'Jal - Lighter',
     backgroundColor: 'var(--primary-lighter)',
     hexCode: '#97C5F0',
-    colorCode: 'rgb(0, 51, 101)',
+    colorCode: 'rgb(151, 197, 240)',
   },
   {
     name: 'Jal - Lightest',
     backgroundColor: 'var(--primary-lightest)',
     hexCode: '#DCECF9',
-    colorCode: 'rgb(0, 51, 101)',
+    colorCode: 'rgb(220, 236, 249)',
   },
 ];
 
 export const ALERT_COLORS = [
   {
-    name: 'Jal - Darker',
+    name: 'Mirch - Darker',
     backgroundColor: 'var(--alert-darker)',
     hexCode: '#631919',
-    colorCode: 'rgb(0, 51, 101)',
+    colorCode: 'rgb(99, 25, 25)',
   },
   {
-    name: 'Jal - Dark',
+    name: 'Mirch - Dark',
     backgroundColor: 'var(--alert-dark)',
     hexCode: '#9C2828',
-    colorCode: 'rgb(0, 51, 101)',
+    colorCode: 'rgb(156, 40, 40)',
   },
   {
-    name: 'Jal - Default',
+    name: 'Mirch - Default',
     backgroundColor: 'var(--alert)',
     hexCode: '#D93737',
-    colorCode: 'rgb(0, 51, 101)',
+    colorCode: 'rgb(217, 55, 55)',
   },
   {
-    name: 'Jal - Light',
+    name: 'Mirch - Light',
     backgroundColor: 'var(--alert-light)',
     hexCode: '#EB776C',
-    colorCode: 'rgb(0, 51, 101)',
+    colorCode: 'rgb(235, 119, 108)',
   },
   {
-    name: 'Jal - Lighter',
+    name: 'Mirch - Lighter',
     backgroundColor: 'var(--alert-lighter)',
     hexCode: '#F7ADA5',
-    colorCode: 'rgb(0, 51, 101)',
+    colorCode: 'rgb(247, 173, 165)',
   },
   {
-    name: 'Jal - Lightest',
+    name: 'Mirch - Lightest',
     backgroundColor: 'var(--alert-lightest)',
     hexCode: '#F9E2E2',
-    colorCode: 'rgb(0, 51, 101)',
+    colorCode: 'rgb(249, 226, 226)',
+  },
+];
+
+export const SUCCESS_COLORS = [
+  {
+    name: 'Neem - Darker',
+    backgroundColor: 'var(--success-darker)',
+    hexCode: '#154D26',
+    colorCode: 'rgb(21, 77, 38)',
+  },
+  {
+    name: 'Neem - Dark',
+    backgroundColor: 'var(--success-dark)',
+    hexCode: '#227934',
+    colorCode: 'rgb(34, 121, 52)',
+  },
+  {
+    name: 'Neem - Default',
+    backgroundColor: 'var(--success)',
+    hexCode: '#2EA843',
+    colorCode: 'rgb(46, 168, 67)',
+  },
+  {
+    name: 'Neem - Light',
+    backgroundColor: 'var(--success-light)',
+    hexCode: '#71C077',
+    colorCode: 'rgb(113, 192, 119)',
+  },
+  {
+    name: 'Neem - Lighter',
+    backgroundColor: 'var(--success-lighter)',
+    hexCode: '#A5D8AA',
+    colorCode: 'rgb(165, 216, 170)',
+  },
+  {
+    name: 'Neem - Lightest',
+    backgroundColor: 'var(--success-lightest)',
+    hexCode: '#D7EFDF',
+    colorCode: 'rgb(215, 239, 223)',
   },
 ];
 
@@ -88,37 +127,257 @@ export const WARNING_COLORS = [
     name: 'Haldi - Darker',
     backgroundColor: 'var(--warning-darker)',
     hexCode: '#6B4A06',
-    colorCode: 'rgb(0, 51, 101)',
+    colorCode: 'rgb(107, 74, 6)',
   },
   {
     name: 'Haldi - Dark',
     backgroundColor: 'var(--warning-dark)',
     hexCode: '#B78707',
-    colorCode: 'rgb(0, 51, 101)',
+    colorCode: 'rgb(183, 135, 7)',
   },
   {
     name: 'Haldi - Default',
     backgroundColor: 'var(--warning)',
     hexCode: '#FFC208',
-    colorCode: 'rgb(0, 51, 101)',
+    colorCode: 'rgb(255, 194, 8)',
   },
   {
     name: 'Haldi - Light',
     backgroundColor: 'var(--warning-light)',
     hexCode: '#FFD462',
-    colorCode: 'rgb(0, 51, 101)',
+    colorCode: 'rgb(255, 212, 98)',
   },
   {
     name: 'Haldi - Lighter',
     backgroundColor: 'var(--warning-lighter)',
     hexCode: '#FFE597',
-    colorCode: 'rgb(0, 51, 101)',
+    colorCode: 'rgb(255, 229, 151)',
   },
   {
     name: 'Haldi - Lightest',
     backgroundColor: 'var(--warning-lightest)',
     hexCode: '#FFF5C7',
-    colorCode: 'rgb(0, 51, 101)',
+    colorCode: 'rgb(255, 245, 199)',
+  },
+];
+
+
+export const ACCENT1_COLORS = [
+  {
+    name: 'Tawak - Darker',
+    backgroundColor: 'var(--accent1-darker)',
+    hexCode: '#743208',
+    colorCode: 'rgb(116, 50, 8)',
+  },
+  {
+    name: 'Tawak - Dark',
+    backgroundColor: 'var(--accent1-dark)',
+    hexCode: '#B35F13',
+    colorCode: 'rgb(179, 95, 19)',
+  },
+  {
+    name: 'Tawak - Default',
+    backgroundColor: 'var(--accent1)',
+    hexCode: '#F07D00',
+    colorCode: 'rgb(240, 125, 0)',
+  },
+  {
+    name: 'Tawak - Light',
+    backgroundColor: 'var(--accent1-light)',
+    hexCode: '#FEAC5F',
+    colorCode: 'rgb(254, 172, 95)',
+  },
+  {
+    name: 'Tawak - Lighter',
+    backgroundColor: 'var(--accent1-lighter)',
+    hexCode: '#FFC998',
+    colorCode: 'rgb(255, 201, 152)',
+  },
+  {
+    name: 'Tawak - Lightest',
+    backgroundColor: 'var(--accent1-lightest)',
+    hexCode: '#FDE6CE',
+    colorCode: 'rgb(253, 230, 206)',
+  },
+];
+
+export const ACCENT2_COLORS = [
+  {
+    name: 'Jamun - Darker',
+    backgroundColor: 'var(--accent2-darker)',
+    hexCode: '#4E3572',
+    colorCode: 'rgb(78, 53, 114)',
+  },
+  {
+    name: 'Jamun - Dark',
+    backgroundColor: 'var(--accent2-dark)',
+    hexCode: '#644491',
+    colorCode: 'rgb(100, 68, 145)',
+  },
+  {
+    name: 'Jamun - Default',
+    backgroundColor: 'var(--accent2)',
+    hexCode: '#7A53B2',
+    colorCode: 'rgb(122, 83, 178)',
+  },
+  {
+    name: 'Jamun - Light',
+    backgroundColor: 'var(--accent2-light)',
+    hexCode: '#9D7EC6',
+    colorCode: 'rgb(157, 126, 198)',
+  },
+  {
+    name: 'Jamun - Lighter',
+    backgroundColor: 'var(--accent2-lighter)',
+    hexCode: '#BFAADA',
+    colorCode: 'rgb(191, 170, 218)',
+  },
+  {
+    name: 'Jamun - Lightest',
+    backgroundColor: 'var(--accent2-lightest)',
+    hexCode: '#E0D8EE',
+    colorCode: 'rgb(224, 216, 238)',
+  },
+];
+
+export const ACCENT3_COLORS = [
+  {
+    name: 'Neel - Darker',
+    backgroundColor: 'var(--accent3-darker)',
+    hexCode: '#1C2561',
+    colorCode: 'rgb(28, 37, 97)',
+  },
+  {
+    name: 'Neel - Dark',
+    backgroundColor: 'var(--accent3-dark)',
+    hexCode: '#2C3A98',
+    colorCode: 'rgb(44, 58, 152)',
+  },
+  {
+    name: 'Neel - Default',
+    backgroundColor: 'var(--accent3)',
+    hexCode: '#3D51D4',
+    colorCode: 'rgb(61, 81, 212)',
+  },
+  {
+    name: 'Neel - Light',
+    backgroundColor: 'var(--accent3-light)',
+    hexCode: '#7583E1',
+    colorCode: 'rgb(117, 131, 225)',
+  },
+  {
+    name: 'Neel - Lighter',
+    backgroundColor: 'var(--accent3-lighter)',
+    hexCode: '#ABB4ED',
+    colorCode: 'rgb(171, 180, 237)',
+  },
+  {
+    name: 'Neel - Lightest',
+    backgroundColor: 'var(--accent3-lightest)',
+    hexCode: '#E2E5F9',
+    colorCode: 'rgb(226, 229, 249)',
+  },
+];
+
+export const ACCENT4_COLORS = [
+  {
+    name: 'Nimbu - Darker',
+    backgroundColor: 'var(--accent4-darker)',
+    hexCode: '#304A0B',
+    colorCode: 'rgb(48, 74, 11)',
+  },
+  {
+    name: 'Nimbu - Dark',
+    backgroundColor: 'var(--accent4-dark)',
+    hexCode: '#578715',
+    colorCode: 'rgb(87, 135, 21)',
+  },
+  {
+    name: 'Nimbu - Default',
+    backgroundColor: 'var(--accent4)',
+    hexCode: '#82C91E',
+    colorCode: 'rgb(130, 201, 30)',
+  },
+  {
+    name: 'Nimbu - Light',
+    backgroundColor: 'var(--accent4-light)',
+    hexCode: '#A6D763',
+    colorCode: 'rgb(166, 215, 99)',
+  },
+  {
+    name: 'Nimbu - Lighter',
+    backgroundColor: 'var(--accent4-lighter)',
+    hexCode: '#C6E599',
+    colorCode: 'rgb(198, 229, 153)',
+  },
+  {
+    name: 'Nimbu - Lightest',
+    backgroundColor: 'var(--accent4-lightest)',
+    hexCode: '#E3F3CE',
+    colorCode: 'rgb(227, 243, 206)',
+  },
+];
+
+export const NEUTRALS = [
+  {
+    name: 'Night',
+    backgroundColor: 'var(--inverse)',
+    hexCode: '#2F2F2F',
+    colorCode: 'rgb(47, 47, 47)',
+  },
+  {
+    name: 'Night - Light',
+    backgroundColor: 'var(--inverse-light)',
+    hexCode: '#595959',
+    colorCode: 'rgb(89, 89, 89)',
+  },
+  {
+    name: 'Night - Lighter',
+    backgroundColor: 'var(--inverse-lighter)',
+    hexCode: '#868686',
+    colorCode: 'rgb(134, 134, 134)',
+  },
+  {
+    name: 'Night - Lightest',
+    backgroundColor: 'var(--inverse-lightest)',
+    hexCode: '#A6A6A6',
+    colorCode: 'rgb(166, 166, 166)',
+  },
+  {
+    name: 'Stone',
+    backgroundColor: 'var(--secondary)',
+    hexCode: '#D5D5D5',
+    colorCode: 'rgb(213, 213, 213)',
+  },
+  {
+    name: 'Stone - Dark',
+    backgroundColor: 'var(--secondary-dark)',
+    hexCode: '#C5C5C5',
+    colorCode: 'rgb(197, 197, 197)',
+  },
+  {
+    name: 'Stone - Light',
+    backgroundColor: 'var(--secondary-light)',
+    hexCode: '#E5E5E5',
+    colorCode: 'rgb(229, 229, 229)',
+  },
+  {
+    name: 'Stone - Lighter',
+    backgroundColor: 'var(--secondary-lighter)',
+    hexCode: '#ECECEC',
+    colorCode: 'rgb(236, 236, 236)',
+  },
+  {
+    name: 'Stone - Lightest',
+    backgroundColor: 'var(--secondary-lightest)',
+    hexCode: '#F4F4F4',
+    colorCode: 'rgb(244, 244, 244)',
+  },
+  {
+    name: 'Namak',
+    backgroundColor: 'var(--white)',
+    hexCode: '#FFFFFF',
+    colorCode: 'rgb(245, 245, 245)',
   },
 ];
 
@@ -132,6 +391,7 @@ export const WARNING_COLORS = [
   <Colors colorData={PRIMARY_COLORS} />
 </Row>
 
+
 #### Secondary colors
 
 <br />
@@ -142,8 +402,62 @@ export const WARNING_COLORS = [
   <Colors colorData={ALERT_COLORS} />
 </Row>
 
+<br />
+
+##### Neem
+
+<Row className='mb-10'>
+  <Colors colorData={SUCCESS_COLORS} />
+</Row>
+
+<br />
+
 ##### Haldi
 
-<Row>
+<Row className='mb-10'>
   <Colors colorData={WARNING_COLORS} />
 </Row>
+
+<br />
+
+#### Accent colors
+
+<br />
+
+##### Tawak
+
+<Row className='mb-10'>
+  <Colors colorData={ACCENT1_COLORS} />
+</Row>
+
+<br />
+
+##### Jamun
+
+<Row className='mb-10'>
+  <Colors colorData={ACCENT2_COLORS} />
+</Row>
+
+<br />
+
+##### Neel
+
+<Row className='mb-10'>
+  <Colors colorData={ACCENT3_COLORS} />
+</Row>
+
+<br />
+
+##### Nimbu
+
+<Row className='mb-10'>
+  <Colors colorData={ACCENT4_COLORS} />
+</Row>
+
+#### Neutrals
+
+<Row className='mb-10'>
+  <Colors colorData={NEUTRALS} />
+</Row>
+
+<br />

package/docs/src/pages/foundations/layout/index.mdx

@@ -5,7 +5,7 @@ date: 15 June 2021
 showMobile: true
 ---
 
-#### Spacing
+### Spacing
 
 We use 8px as the base unit for our spacial system. The spacing system has been roughly generated by multiplying eight with even numbers.
 
@@ -22,52 +22,41 @@ We use 8px as the base unit for our spacial system. The spacing system has been
 <br />
 <br />
 
-#### Grid
+### Grid
 
 Using a baseline grid creates a consistent rhythm between the components and typography. We use a 12-columns grid.
 
 <br />
 
-##### Types
-
-###### Regular Grid
-
-<Card shadow='none'>
-  <Table
-    showMenu={false}
-    data={[
-      {
-        property: 'Left Padding',
-        value: '8px',
-      },
-      {
-        property: 'Right Padding',
-        value: '8px',
-      },
-      {
-        property: 'Gutter',
-        value: '16px',
-      },
-    ]}
-    schema={[
-      {
-        name: 'property',
-        displayName: 'Property',
-        width: '40%',
-        sorting: false,
-        separator: true,
-      },
-      {
-        name: 'value',
-        displayName: 'Value',
-        width: '30%',
-        sorting: false,
-        separator: true,
-      },
-    ]}
-    withHeader={false}
-  />
-</Card>
+#### Types
+
+##### Regular Grid
+<br/>
+<br/>
+
+<table style="width: 100%">
+  <tbody>
+    <tr>
+      <th style="width:50%; text-align: left;">Property</th>
+      <th style="width:50%; text-align: left;">Value</th>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Left padding</td>
+      <td>8px</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Right padding</td>
+      <td>
+          8px
+      </td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Gutter</td>
+      <td>16px</td>
+    </tr>
+  </tbody>
+</table>
+
 
 <br />
 
@@ -75,48 +64,34 @@ Using a baseline grid creates a consistent rhythm between the components and typ
 
 <br />
 
-###### Grid with margin
+##### Grid with margin
 
 For the outermost grid, this component is used. This can
 also be nested subsequently if a 16px padding is required
 on both sides.
 
-<Card shadow='none'>
-  <Table
-    showMenu={false}
-    data={[
-      {
-        property: 'Left Padding',
-        value: '8 + 8px',
-      },
-      {
-        property: 'Right Padding',
-        value: '8 + 8px',
-      },
-      {
-        property: 'Gutter',
-        value: '16px',
-      },
-    ]}
-    schema={[
-      {
-        name: 'property',
-        displayName: 'Property',
-        width: '40%',
-        sorting: false,
-        separator: true,
-      },
-      {
-        name: 'value',
-        displayName: 'Value',
-        width: '30%',
-        sorting: false,
-        separator: true,
-      },
-    ]}
-    withHeader={false}
-  />
-</Card>
+<table style="width: 100%">
+  <tbody>
+    <tr>
+      <th style="width:50%; text-align: left;">Property</th>
+      <th style="width:50%; text-align: left;">Value</th>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Left padding</td>
+      <td>8 + 8px</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Right padding</td>
+      <td>8 + 8px </td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Gutter</td>
+      <td>16px</td>
+    </tr>
+  </tbody>
+</table>
+
+
 
 <br />
 
@@ -125,7 +100,7 @@ on both sides.
 <br />
 <br />
 
-##### Columns
+#### Columns
 
 The column includes the padding at the inside, 8 px each side. This way the gutter becomes 16px for adjacent columns.
 
@@ -134,7 +109,7 @@ The column includes the padding at the inside, 8 px each side. This way the gutt
 <br />
 <br />
 
-##### Components
+#### Components
 
 We use a 8px baseline grid. All UI components including paddings and margins are created in multiples of eight so that everything aligns to the pixel grid.
 When text is used within a UI element, set the line-height to be consistent with the baseline grid.
@@ -144,7 +119,7 @@ When text is used within a UI element, set the line-height to be consistent with
 <br />
 <br />
 
-##### Typography
+#### Typography
 
 All typography aligns to a 4px baseline grid. This allows for readable line heights at all sizes.