jp-composter 0.1.0

package/src/stories/Colors.mdx

@@ -0,0 +1,1418 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Tokens/Color" />
+# Color tokens
+
+<h3 style={{fontWeight: 'normal',fontFamily:'Lato'}}>Slice’s color system is designed with brand personality, usability, and accessibility in mind. 
+Additionally, our color system’s decisions align our products.</h3> 
+ ---
+
+# Accent
+
+<table
+  style={{
+    borderCollapse: 'separate',
+    borderSpacing: 0,
+    width: '100%',
+    border: '1px solid var(--border-light, #E6E6E6)',
+    borderRadius: '24px',
+    overflow: 'hidden',
+  }}
+>
+  <thead>
+    <tr>
+      <th
+        style={{
+          border: '1px solid var(--border-light, #E6E6E6)',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          borderTopRadius: '24px',
+          padding: '24px 16px',
+          fontWeight: '600',
+          fontSize: '18px',
+          width: '33.33%',
+        }}
+      >
+        Title
+      </th>
+      <th
+        style={{
+          border: '1px solid var(--border-light, #E6E6E6)',
+          padding: '24px 16px',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          fontWeight: '600',
+          fontSize: '14px',
+          width: '33.33%',
+        }}
+      >
+        Value on light
+      </th>
+      <th
+        style={{
+        
+          border: '1px solid var(--border-light, #E6E6E6)',
+          padding: '24px 16px',
+          textAlign: 'left',
+          background: '#f9f9f9',
+        
+          fontWeight: '600',
+          fontSize: '14px',
+          width: '33.33%',
+          fontSizeAdjust:'18px',
+        }}
+      >
+        Value on dark
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    {[
+      {
+        color: 'colorAccentCO',
+        light: { name: 'COPrimary500', color: '#D82927' },
+        dark: { name: 'COPrimary500', color: '#D82927' },
+      },
+      {
+        color: 'colorAccentCOAlpha',
+        light: { name: 'COPrimaryA100', color: 'rgba(216, 41, 39, 0.10)' },
+        dark: { name: 'COPrimaryA100', color: 'rgba(216, 41, 39, 0.10)' },
+      },
+      {
+        color: 'colorAccentCM',
+        light: { name: 'CMPrimary500', color: '#5BAE75' },
+        dark: { name: 'CMPrimary500', color: '#5BAE75' },
+      },
+      {
+        color: 'colorAccentCMAlpha',
+        light: { name: 'CMPrimaryA100', color: 'rgba(91, 174, 117, 0.10)' },
+        dark: { name: 'CMPrimaryA100', color: 'rgba(91, 174, 117, 0.10)' },
+      },
+      
+    ].map((row) => (
+      <tr key={row.color}>
+        <td
+          style={{
+            padding: '24px 16px',
+            fontSize:'18px',
+             backgroundColor: '#fff', 
+          }}
+        >
+          {row.color}
+        </td>
+        <td
+          style={{
+            padding: '24px 16px',
+             backgroundColor: '#fff', 
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <div
+              style={{
+                width: '32px',
+                height: '24px',
+                borderRadius: '1000px',
+                border: '1px solid var(--border-light, #E6E6E6)',
+                background: row.light.color,
+                
+              }}
+            />
+            <span style={{ fontSize: '18px' }}>
+              {row.light.name}
+            </span>
+          </div>
+        </td>
+        <td
+          style={{
+            padding: '24px 16px',
+            border: '1px solid var(--border-light, #E6E6E6)',
+            backgroundColor: '#000',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#fff', }}>
+            <div
+              style={{
+                width: '32px',
+                height: '24px',
+                borderRadius: '1000px',
+                border: '1px solid var(--border-light, #383838)',
+                background: row.dark.color,
+              }}
+            />
+            <span style={{ fontSize: '18px' }}>
+              {row.dark.name}
+            </span>
+          </div>
+        </td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+
+# Action
+
+<table
+  style={{
+    borderCollapse: 'separate',
+    borderSpacing: 0,
+    width: '100%',
+    borderRadius: '24px',
+    overflow: 'hidden',
+  }}
+>
+  <thead>
+    <tr>
+      <th
+        style={{
+          textAlign: 'left',
+          background: '#f9f9f9',
+          borderTopLeftRadius: '24px',
+          padding: '24px 16px',
+          fontWeight: '600',
+          fontSize: '14px',
+          width: '33.33%',
+          borderBottom:'#E6E6E6'
+        }}
+      >
+        Title
+      </th>
+      <th
+        style={{
+          padding: '24px 16px',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          fontWeight: '600',
+          fontSize: '14px',
+          width: '33.33%',
+        }}
+      >
+        Value on light
+      </th>
+      <th
+        style={{
+          padding: '24px 16px',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          borderTopRightRadius: '24px',
+          fontWeight: '600',
+          fontSize: '14px',
+          width: '33.33%',
+        }}
+      >
+        Value on dark
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    {[
+      {
+        color: 'colorActionPostive',
+        light: { name: 'green500', color: '#14AD5C' },
+        dark: { name: 'green500', color: '#14AD5C' },
+      },
+      {
+        color: 'colorActionPostiveAlpha',
+        light: { name: 'greenA200', color: 'rgba(20, 173, 92, 0.40)' },
+        dark: { name: 'greenA200', color: '#14AD5C' },
+      },
+      {
+        color: 'colorActionNegative',
+        light: { name: 'red500', color: '#EB211E' },
+        dark: { name: 'red500', color: '#EB211E' },
+      },
+      {
+        color: 'colorActionNegativeAlpha',
+        light: { name: 'redA200', color: 'rgba(235, 33, 30, 0.40)' },
+        dark: { name: 'redA200', color: '#EB211E' },
+      },
+      {
+        color: 'colorActionLink',
+        light: { name: 'blue500', color: '#0263E0' },
+        dark: { name: 'blue500', color: '#0263E0' },
+      },
+      
+    ].map((row) => (
+      <tr key={row.color}>
+        <td
+          style={{
+            padding: '24px 16px',
+             backgroundColor: '#fff', 
+             fontSize:'18px',
+          }}
+        >
+          {row.color}
+        </td>
+        <td
+          style={{
+            padding: '24px 16px',
+            border: '1px solid var(--border-light, #E6E6E6)',
+             backgroundColor: '#fff', 
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <div
+              style={{
+                width: '32px',
+                height: '24px',
+                borderRadius: '1000px',
+                border: '1px solid var(--border-light, #E6E6E6)',
+                background: row.light.color,
+                
+              }}
+            />
+            <span style={{ fontSize: '18px' }}>
+              {row.light.name}ce'
+            </span>
+          </div>
+        </td>
+        <td
+          style={{
+            padding: '24px 16px',
+            backgroundColor: '#000',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#fff', }}>
+            <div
+              style={{
+                width: '32px',
+                height: '24px',
+                borderRadius: '1000px',
+                border: '1px solid var(--border-light, #383838)',
+                background: row.dark.color,
+              }}
+            />
+            <span style={{ fontSize: '18px' }}>
+              {row.dark.name}
+            </span>
+          </div>
+        </td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+
+# Background
+
+<table
+  style={{
+    borderCollapse: 'separate',
+    borderSpacing: 0,
+    width: '100%',
+    border: '1px solid var(--border-light, #E6E6E6)',
+    borderRadius: '24px',
+    overflow: 'hidden',
+  }}
+>
+  <thead>
+    <tr>
+      <th
+        style={{
+          border: '1px solid var(--border-light, #E6E6E6)',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          borderTopLeftRadius: '24px',
+          padding: '24px 16px',
+          fontWeight: '600',
+          fontSize: '18px',
+          width: '33.33%',
+        }}
+      >
+        Title
+      </th>
+      <th
+        style={{
+          border: '1px solid var(--border-light, #E6E6E6)',
+          padding: '24px 16px',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          fontWeight: '600',
+          fontSize: '18px',
+          width: '33.33%',
+        }}
+      >
+        Value on light
+      </th>
+      <th
+        style={{
+        
+          border: '1px solid var(--border-light, #E6E6E6)',
+          padding: '24px 16px',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          borderTopRightRadius: '24px',
+          fontWeight: '600',
+          fontSize: '18px',
+          width: '33.33%',
+        }}
+      >
+        Value on dark
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    {[
+        {
+        color: 'colorBackgroundPrimary',
+        light: { name: 'white1000', color: '#FFF' },
+        dark: { name: 'neutral1000', color: '#111' },
+      },
+      {
+        color: 'colorBackgroundSecondary',
+        light: { name: 'slate300', color: '#D2D4D6' },
+        dark: { name: 'slate800', color: '#434343' },
+      },
+      {
+        color: 'colorBackgroundTertiary',
+        light: { name: 'slate200', color: '#EAEDF0' },
+        dark: { name: 'slate700', color: '#5A5A5A' },
+      },
+      {
+        color: 'colorBackgroundLight',
+        light: { name: 'slate100', color: '#F5F5F5' },
+        dark: { name: 'neutral800', color: '#2C2C2C' },
+      },
+      {
+        color: 'colorBackgroundLighter',
+        light: { name: 'slate100', color: '#F7FAFD' },
+        dark: { name: 'slate900', color: '#303030' },
+      },
+      {
+        color: 'colorBackgroundElevated',
+        light: { name: 'white1000', color: '#FFF' },
+        dark: { name: 'neutral900', color: '#1E1E1E' },
+      },
+      {
+        color: 'colorBackgroundAccent',
+        light: { name: 'white1000', color: '#FFF' },
+        dark: { name: 'neutral800', color: '#2C2C2C' },
+      },
+      {
+        color: 'colorBackgroundAccentCO',
+        light: { name: 'colorAccentCO', color: '#D82927' },
+        dark: { name: 'colorAccentCO', color: '#D82927' },
+      },
+      {
+        color: 'colorBackgroundAccentCM',
+        light: { name: 'colorAccentCM', color: '#5BAE75' },
+        dark: { name: 'colorAccentCM', color: '#5BAE75' },
+      },
+      {
+        color: 'colorBackgroundNegative',
+        light: { name: 'colorActionNegative', color: '#EB211E' },
+        dark: { name: 'colorActionNegative', color: '#EB211E' },
+      },
+      {
+        color: 'colorBackgroundPostive',
+        light: { name: 'colorActionPostive', color: '#14AD5C' },
+        dark: { name: 'colorActionPostive', color: '#14AD5C' },
+      },
+    {
+        color: 'colorBackgroundLink',
+        light: { name: 'colorActionLink', color: '#0263E0' },
+        dark: { name: 'colorActionLink', color: '#0263E0' },
+      },
+    ].map((row) => (
+      <tr key={row.color}>
+        <td
+          style={{
+            padding: '24px 16px',
+            border: '1px solid var(--border-light, #E6E6E6)',
+             backgroundColor: '#fff', 
+             fontSize:'18px'
+          }}
+        >
+          {row.color}
+        </td>
+        <td
+          style={{
+            padding: '24px 16px',
+            border: '1px solid var(--border-light, #E6E6E6)',
+             backgroundColor: '#fff', 
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <div
+              style={{
+                width: '32px',
+                height: '24px',
+                borderRadius: '1000px',
+                border: '1px solid var(--border-light, #E6E6E6)',
+                background: row.light.color,
+                
+              }}
+            />
+            <span style={{  fontSize: '18px' }}>
+              {row.light.name}
+            </span>
+          </div>
+        </td>
+        <td
+          style={{
+            padding: '12px 16px',
+            border: '1px solid var(--border-light, #E6E6E6)',
+            backgroundColor: '#000',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#fff', }}>
+            <div
+              style={{
+                width: '32px',
+                height: '24px',
+                borderRadius: '1000px',
+                border: '1px solid var(--border-light, #383838)',
+                background: row.dark.color,
+              }}
+            />
+            <span style={{ fontSize: '18px' }}>
+              {row.dark.name}
+            </span>
+          </div>
+        </td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+
+# Border
+
+<table
+  style={{
+    borderCollapse: 'separate',
+    borderSpacing: 0,
+    width: '100%',
+    border: '1px solid var(--border-light, #E6E6E6)',
+    borderRadius: '24px',
+    overflow: 'hidden',
+  }}
+>
+  <thead>
+    <tr>
+      <th
+        style={{
+          border: '1px solid var(--border-light, #E6E6E6)',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          borderTopLeftRadius: '24px',
+          padding: '24px 16px',
+          fontWeight: '600',
+          fontSize: '14px',
+          width: '33.33%',
+        }}
+      >
+        Title
+      </th>
+      <th
+        style={{
+          border: '1px solid var(--border-light, #E6E6E6)',
+          padding: '24px 16px',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          fontWeight: '600',
+          fontSize: '18px',
+          width: '33.33%',
+        }}
+      >
+        Value on light
+      </th>
+      <th
+        style={{
+        
+          border: '1px solid var(--border-light, #E6E6E6)',
+          padding: '24px 16px',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          borderTopRightRadius: '24px',
+          fontWeight: '600',
+          fontSize: '18px',
+          width: '33.33%',
+        }}
+      >
+        Value on dark
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    {[
+      {
+        color: 'colorBorderStrong',
+        light: { name: 'slate1000', color: '#111' },
+        dark: { name: 'white1000', color: '#FFF' },
+      },
+      {
+        color: 'colorBorderMedium',
+        light: { name: 'neutral400', color: '#B3B3B3' },
+        dark: { name: 'neutral500', color: '#757575' },
+      },
+      {
+        color: 'colorBorderSubtle',
+        light: { name: 'neutral300', color: '#D9D9D9' },
+        dark: { name: 'neutral600', color: '#444' },
+      },
+      {
+        color: 'colorBorderLight',
+        light: { name: 'neutral200', color: '#E6E6E6' },
+        dark: { name: 'neutral700', color: '#383838' },
+      },
+      {
+        color: 'colorBorderLighter',
+        light: { name: 'neutral100', color: '#F5F5F5' },
+        dark: { name: 'neutral800', color: '#2C2C2C' },
+      },
+      {
+        color: 'colorBorderAlpha',
+        light: { name: 'neutralA50', color: 'rgba(17, 17, 17, 0.05)' },
+        dark: { name: 'whiteA100', color: 'rgba(255, 255, 255, 0.05)' },
+      },
+      {
+        color: 'colorBorderAccentCO',
+        light: { name: 'colorAccentCO', color: '#D82927' },
+        dark: { name: 'colorAccentCO', color: '#D82927' },
+      },
+      {
+        color: 'colorBorderAccentCM',
+        light: { name: 'colorAccentCM', color: '#5BAE75' },
+        dark: { name: 'colorAccentCM', color: '#5BAE75' },
+      },
+      {
+        color: 'colorBorderNegative',
+        light: { name: 'colorActionNegative', color: '#EB211E' },
+        dark: { name: 'colorActionNegative', color: '#EB211E' },
+      },
+      {
+        color: 'colorBorderPostive',
+        light: { name: 'colorActionPostive', color: '#14AD5C' },
+        dark: { name: 'colorActionPostive', color: '#14AD5C' },
+      },
+    {
+        color: 'colorBorderLink',
+        light: { name: 'colorActionLink', color: '#0263E0' },
+        dark: { name: 'colorActionLink', color: '#0263E0' },
+      },
+    ].map((row) => (
+      <tr key={row.color}>
+        <td
+          style={{
+            padding: '24px 16px',
+            border: '1px solid var(--border-light, #E6E6E6)',
+             backgroundColor: '#fff', 
+             fontSize:'18px'
+          }}
+        >
+          {row.color}
+        </td>
+        <td
+          style={{
+            padding: '24px 16px',
+            border: '1px solid var(--border-light, #E6E6E6)',
+             backgroundColor: '#fff', 
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <div
+              style={{
+                width: '32px',
+                height: '24px',
+                borderRadius: '1000px',
+                border: '1px solid var(--border-light, #E6E6E6)',
+                background: row.light.color,
+                
+              }}
+            />
+            <span style={{  fontSize: '18px' }}>
+              {row.light.name}
+            </span>
+          </div>
+        </td>
+        <td
+          style={{
+            padding: '24px 16px',
+            border: '1px solid var(--border-light, #E6E6E6)',
+            backgroundColor: '#000',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#fff', }}>
+            <div
+              style={{
+                width: '32px',
+                height: '24px',
+                borderRadius: '1000px',
+                border: '1px solid var(--border-light, #383838)',
+                background: row.dark.color,
+              }}
+            />
+            <span style={{ fontSize: '18px' }}>
+              {row.dark.name}
+            </span>
+          </div>
+        </td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+
+# Contrast
+<table
+  style={{
+    borderCollapse: 'separate',
+    borderSpacing: 0,
+    width: '100%',
+    border: '1px solid var(--border-light, #E6E6E6)',
+    borderRadius: '24px',
+    overflow: 'hidden',
+  }}
+>
+  <thead>
+    <tr>
+      <th
+        style={{
+          border: '1px solid var(--border-light, #E6E6E6)',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          borderTopLeftRadius: '24px',
+          padding: '24px 16px',
+          fontWeight: '600',
+          fontSize: '14px',
+          width: '33.33%',
+        }}
+      >
+        Title
+      </th>
+      <th
+        style={{
+          border: '1px solid var(--border-light, #E6E6E6)',
+          padding: '24px 16px',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          fontWeight: '600',
+          fontSize: '18px',
+          width: '33.33%',
+        }}
+      >
+        Value on light
+      </th>
+      <th
+        style={{
+        
+          border: '1px solid var(--border-light, #E6E6E6)',
+          padding: '24px 16px',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          borderTopRightRadius: '24px',
+          fontWeight: '600',
+          fontSize: '18px',
+          width: '33.33%',
+        }}
+      >
+        Value on dark
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    {[
+      {
+        color: 'colorContrastWhite',
+        light: { name: 'white1000', color: '#FFF' },
+        dark: { name: 'white1000', color: '#FFF' },
+      },
+      {
+        color: 'colorContrastBlack',
+        light: { name: 'neutral1000', color: '#111' },
+        dark: { name: 'neutral1000', color: '#111' },
+      },
+      
+      
+    ].map((row) => (
+      <tr key={row.color}>
+        <td
+          style={{
+            padding: '24px 16px',
+            border: '1px solid var(--border-light, #E6E6E6)',
+             backgroundColor: '#fff', 
+             fontSize:'18px',
+          }}
+        >
+          {row.color}
+        </td>
+        <td
+          style={{
+            padding: '24px 16px',
+            border: '1px solid var(--border-light, #E6E6E6)',
+             backgroundColor: '#fff', 
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <div
+              style={{
+                width: '32px',
+                height: '24px',
+                borderRadius: '1000px',
+                border: '1px solid var(--border-light, #E6E6E6)',
+                background: row.light.color,
+                
+              }}
+            />
+            <span style={{ fontSize: '18px' }}>
+              {row.light.name}
+            </span>
+          </div>
+        </td>
+        <td
+          style={{
+            padding: '24px 16px',
+            border: '1px solid var(--border-light, #E6E6E6)',
+            backgroundColor: '#000',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#fff', }}>
+            <div
+              style={{
+                width: '32px',
+                height: '24px',
+                borderRadius: '1000px',
+                border: '1px solid var(--border-light, #383838)',
+                background: row.dark.color,
+              }}
+            />
+            <span style={{ fontSize: '18px' }}>
+              {row.dark.name}
+            </span>
+          </div>
+        </td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+
+# Foreground
+
+<table
+  style={{
+    borderCollapse: 'separate',
+    borderSpacing: 0,
+    width: '100%',
+    border: '1px solid var(--border-light, #E6E6E6)',
+    borderRadius: '24px',
+    overflow: 'hidden',
+  }}
+>
+  <thead>
+    <tr>
+      <th
+        style={{
+          border: '1px solid var(--border-light, #E6E6E6)',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          borderTopLeftRadius: '24px',
+          padding: '24px 16px',
+          fontWeight: '600',
+          fontSize: '14px',
+          width: '33.33%',
+        }}
+      >
+        Title
+      </th>
+      <th
+        style={{
+          border: '1px solid var(--border-light, #E6E6E6)',
+          padding: '24px 16px',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          fontWeight: '600',
+          fontSize: '18px',
+          width: '33.33%',
+        }}
+      >
+        Value on light
+      </th>
+      <th
+        style={{
+        
+          border: '1px solid var(--border-light, #E6E6E6)',
+          padding: '24px 16px',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          borderTopRightRadius: '18px',
+          fontWeight: '600',
+          fontSize: '14px',
+          width: '33.33%',
+        }}
+      >
+        Value on dark
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    {[
+      {
+        color: 'colorForegroundPrimary',
+        light: { name: 'neutral1000', color: '#111' },
+        dark: { name: 'white1000', color: '#FFF' },
+      },
+      {
+        color: 'colorForegroundSecondary',
+        light: { name: 'neutral800', color: '#2C2C2C' },
+        dark: { name: 'neutral100', color: '#F5F5F5' },
+      },
+      {
+        color: 'colorForegroundTertiary',
+        light: { name: 'neutral600', color: '#444' },
+        dark: { name: 'neutral200', color: '#E6E6E6' },
+      },
+      {
+        color: 'colorForegroundLight',
+        light: { name: 'neutral500', color: '#757575' },
+        dark: { name: 'neutral300', color: '#D9D9D9' },
+      },
+      {
+        color: 'colorForegroundLighter',
+        light: { name: 'neutral400', color: '#B3B3B3' },
+        dark: { name: 'neutral400', color: '#B3B3B3' },
+      },
+      {
+        color: 'colorForegroundInvariable',
+        light: { name: 'colorContrastWhite', color: '#FFF' },
+        dark: { name: 'colorContrastWhite', color: '#FFF' },
+      },
+      {
+        color: 'colorForegroundAccentCO',
+        light: { name: 'colorAccentCO', color: '#D82927' },
+        dark: { name: 'colorAccentCO', color: '#D82927' },
+      },
+      {
+        color: 'colorForegroundAccentCM',
+        light: { name: 'colorAccentCM', color: '#5BAE75' },
+        dark: { name: 'colorAccentCM', color: '#5BAE75' },
+      },
+      {
+        color: 'colorForegroundNegative',
+        light: { name: 'colorActionNegative', color: '#EB211E' },
+        dark: { name: 'colorActionNegative', color: '#EB211E' },
+      },
+      {
+        color: 'colorForegroundPostive',
+        light: { name: 'colorActionPostive', color: '#14AD5C' },
+        dark: { name: 'colorActionPostive', color: '#14AD5C' },
+      },
+    {
+        color: 'colorForegroundLink',
+        light: { name: 'colorActionLink', color: '#0263E0' },
+        dark: { name: 'colorActionLink', color: '#0263E0' },
+      },
+    ].map((row) => (
+      <tr key={row.color}>
+        <td
+          style={{
+            padding: '24px 16px',
+            border: '1px solid var(--border-light, #E6E6E6)',
+             backgroundColor: '#fff', 
+             fontSize:'18px',
+          }}
+        >
+          {row.color}
+        </td>
+        <td
+          style={{
+            padding: '24px 16px',
+            border: '1px solid var(--border-light, #E6E6E6)',
+             backgroundColor: '#fff', 
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <div
+              style={{
+                width: '32px',
+                height: '24px',
+                borderRadius: '1000px',
+                border: '1px solid var(--border-light, #E6E6E6)',
+                background: row.light.color,
+                
+              }}
+            />
+            <span style={{  fontSize: '18px' }}>
+              {row.light.name}
+            </span>
+          </div>
+        </td>
+        <td
+          style={{
+            padding: '24px 16px',
+            border: '1px solid var(--border-light, #E6E6E6)',
+            backgroundColor: '#000',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#fff', }}>
+            <div
+              style={{
+                width: '32px',
+                height: '24px',
+                borderRadius: '1000px',
+                border: '1px solid var(--border-light, #383838)',
+                background: row.dark.color,
+              }}
+            />
+            <span style={{ fontSize: '18px' }}>
+              {row.dark.name}
+            </span>
+          </div>
+        </td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+
+# State
+<table
+  style={{
+    borderCollapse: 'separate',
+    borderSpacing: 0,
+    width: '100%',
+    border: '1px solid var(--border-light, #E6E6E6)',
+    borderRadius: '24px',
+    overflow: 'hidden',
+  }}
+>
+  <thead>
+    <tr>
+      <th
+        style={{
+          border: '1px solid var(--border-light, #E6E6E6)',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          borderTopLeftRadius: '24px',
+          padding: '24px 16px',
+          fontWeight: '600',
+          fontSize: '18px',
+          width: '33.33%',
+        }}
+      >
+        Title
+      </th>
+      <th
+        style={{
+          border: '1px solid var(--border-light, #E6E6E6)',
+          padding: '24px 16px',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          fontWeight: '600',
+          fontSize: '18px',
+          width: '33.33%',
+        }}
+      >
+        Value on light
+      </th>
+      <th
+        style={{
+        
+          border: '1px solid var(--border-light, #E6E6E6)',
+          padding: '24px 16px',
+          textAlign: 'left',
+          background: '#f9f9f9',
+          borderTopRightRadius: '24px',
+          fontWeight: '600',
+          fontSize: '18px',
+          width: '33.33%',
+        }}
+      >
+        Value on dark
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    {[
+      {
+        color: 'colorStatePrimary-disabled',
+        light: { name: 'neutralA100', color: 'rgba(17, 17, 17, 0.10)' },
+        dark: { name: 'neutralA100', color: 'rgba(17, 17, 17, 0.10)' },
+      },
+      {
+        color: 'colorStatePrimary-hover',
+        light: { name: 'neutralA50', color: 'rgba(17, 17, 17, 0.05)' },
+        dark: { name: 'neutralA50', color: 'rgba(17, 17, 17, 0.05)' },
+      },
+      {
+        color: 'colorStatePrimary-pressed',
+        light: { name: 'neutralA150', color: 'rgba(17, 17, 17, 0.20)' },
+        dark: { name: 'neutralA150', color: 'rgba(17, 17, 17, 0.20)' },
+      },
+      {
+        color: 'colorStateAccentCO-disabled',
+        light: { name: 'COPrimaryA150', color: 'rgba(216, 41, 39, 0.20)' },
+        dark: { name: 'COPrimaryA150', color: 'rgba(216, 41, 39, 0.20)' },
+      },
+      {
+        color: 'colorStateAccentCO-hover 1',
+        light: { name: 'COPrimary400', color: '#E7604E' },
+        dark: { name: 'COPrimary400', color: '#E7604E' },
+      },
+      {
+        color: 'colorStateAccentCO-hover 2',
+        light: { name: 'COPrimaryA50', color: 'rgba(216, 41, 39, 0.05)' },
+        dark: { name: 'COPrimaryA50', color: 'rgba(216, 41, 39, 0.05)' },
+      },
+      {
+        color: 'colorStateAccentCO-pressed 1',
+        light: { name: 'COPrimary600', color: '#B12722' },
+        dark: { name: 'COPrimary600', color: '#B12722' },
+      },
+      {
+        color: 'colorStateAccentCO-pressed 2',
+        light: { name: 'COPrimaryA100', color: 'rgba(216, 41, 39, 0.10)' },
+        dark: { name: 'COPrimaryA100', color: 'rgba(216, 41, 39, 0.10)' },
+      },
+      {
+        color: 'colorStateAccentCM-disabled',
+        light: { name: 'CMPrimaryA150', color: 'rgba(91, 174, 117, 0.10)' },
+        dark: { name: 'CMPrimaryA150', color: 'rgba(91, 174, 117, 0.10)' },
+      },
+      {
+        color: 'colorStateAccentCM-hover 1',
+        light: { name: 'CMPrimary400', color: '#7EBE8F' },
+        dark: { name: 'CMPrimary400', color: '#7EBE8F' },
+      },
+    {
+        color: 'colorStateAccentCM-hover 2',
+        light: { name: 'CMPrimaryA50', color: 'rgba(91, 174, 117, 0.05)' },
+        dark: { name: 'CMPrimaryA50', color: 'rgba(91, 174, 117, 0.05)' },
+      },
+      {
+        color: 'colorStateAccentCM-pressed 1',
+        light: { name: 'CMPrimary600', color: '#4D8F61' },
+        dark: { name: 'CMPrimary600', color: '#4D8F61' },
+      },
+      {
+        color: 'colorStateAccentCM-pressed 2',
+        light: { name: 'CMPrimaryA100', color: 'rgba(91, 174, 117, 0.10)' },
+        dark: { name: 'CMPrimaryA100', color: 'rgba(91, 174, 117, 0.10)' },
+      },
+    {
+        color: 'colorStateContrastWhite-disabled',
+        light: { name: 'WhiteA500', color: 'rgba(91, 174, 117, 0.10)' },
+        dark: { name: 'WhiteA500', color: 'rgba(91, 174, 117, 0.10)' },
+      },
+    ].map((row) => (
+      <tr key={row.color}>
+        <td
+          style={{
+            padding: '24px 16px',
+            border: '1px solid var(--border-light, #E6E6E6)',
+             backgroundColor: '#fff',
+             fontSize:'18px' 
+          }}
+        >
+          {row.color}
+        </td>
+        <td
+          style={{
+            padding: '24px 16px',
+            border: '1px solid var(--border-light, #E6E6E6)',
+             backgroundColor: '#fff', 
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <div
+              style={{
+                width: '32px',
+                height: '24px',
+                borderRadius: '1000px',
+                border: '1px solid var(--border-light, #E6E6E6)',
+                background: row.light.color,
+                
+              }}
+            />
+            <span style={{  fontSize: '18px' }}>
+              {row.light.name}
+            </span>
+          </div>
+        </td>
+        <td
+          style={{
+            padding: '24px 16px',
+            border: '1px solid var(--border-light, #E6E6E6)',
+            backgroundColor: '#000',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#fff', }}>
+            <div
+              style={{
+                width: '32px',
+                height: '24px',
+                borderRadius: '1000px',
+                border: '1px solid var(--border-light, #383838)',
+                background: row.dark.color,
+              }}
+            />
+            <span style={{ fontSize: '18px' }}>
+              {row.dark.name}
+            </span>
+          </div>
+        </td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+  
+# Core
+
+<div
+  style={{
+    display: 'flex',
+    gap: '24px',
+    flexWrap: 'wrap', // allows stacking on smaller screens
+    justifyContent: 'space-between',
+  }}
+>
+  {/* First Table */}
+  <table
+    style={{
+      width: '48%',
+      borderCollapse: 'separate',
+      borderSpacing: 0,
+      border: '1px solid #E6E6E6',
+      borderRadius: '24px',
+      overflow: 'hidden',
+    }}
+  >
+    <thead>
+      <tr>
+        <th
+          style={{
+            border: '1px solid #E6E6E6',
+            background: '#f9f9f9',
+            padding: '24px 16px',
+            fontWeight: 600,
+            fontSize: '18px',
+            borderTopLeftRadius: '24px',
+            width: '50%',
+            textAlign: 'left',
+          }}
+        >
+          Value
+        </th>
+        <th
+          style={{
+            border: '1px solid #E6E6E6',
+            background: '#f9f9f9',
+            padding: '24px 16px',
+            fontWeight: 600,
+            fontSize: '18px',
+            borderTopRightRadius: '24px',
+            width: '50%',
+            textAlign: 'left',
+          }}
+        >
+          Value
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      {[
+        {
+        color: 'colorCOPrimary100',
+        light: { name: '#FFD8D0', color: '#FFD8D0' },
+    },
+    {
+        color: 'colorCOPrimary200',
+        light: { name: '#FBB1A3', color: '#FBB1A3' },
+    },
+    {
+        color: 'colorCOPrimary300',
+        light: { name: '#F38A77', color: '#F38A77' },
+    },
+    {
+        color: 'colorCOPrimary400',
+        light: { name: '#E7604E', color: '#E7604E' },
+    },
+    {
+        color: 'colorCOPrimary500',
+        light: { name: '#D82927', color: '#D82927' },
+    },
+    {
+        color: 'colorCOPrimary600',
+        light: { name: '#B12722', color: '#B12722' },
+    },
+    {
+        color: 'colorCOPrimary700',
+        light: { name: '#8C241D', color: '#8C241D' },
+    },
+    {
+        color: 'colorCOPrimary800',
+        light: { name: '#681F18', color: '#681F18' },
+    },
+    {
+        color: 'colorCOPrimary900',
+        light: { name: '#471913', color: '#471913' },
+    },
+    {
+        color: 'colorCOPrimary1000',
+        light: { name: '#27110B', color: '#27110B' },
+    },
+    {
+        color: 'colorCOPrimaryA50',
+        light: { name: '#27110B - 5%', color: 'rgba(216, 41, 39, 0.05)' },
+    },
+    {
+        color: 'colorCOPrimaryA100',
+        light: { name: '#27110B - 10%', color: 'rgba(216, 41, 39, 0.10)' },
+    },
+    {
+        color: 'colorCOPrimaryA150',
+        light: { name: '#27110B - 20%', color: 'rgba(216, 41, 39, 0.20)' },
+    },
+    {
+        color: 'colorCOPrimaryA200',
+        light: { name: '#27110B - 40%', color: 'rgba(216, 41, 39,0.40)' },
+    },
+    ]
+.map((row) => (
+        <tr key={row.color}>
+          <td style={{ padding: '24px 16px', border: '1px solid #E6E6E6', background: '#fff' ,fontSize:'18px'}}>
+            {row.color}
+          </td>
+          <td style={{ padding: '24px 16px', border: '1px solid #E6E6E6', background: '#fff' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <div
+                style={{
+                  width: '32px',
+                  height: '24px',
+                  borderRadius: '1000px',
+                  background: row.light.color,
+                  border: '1px solid #E6E6E6',
+                }}
+              />
+              <span style={{ fontSize: '18px' }}>{row.light.name}</span>
+            </div>
+          </td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+
+  {/* Second Table with Different Content */}
+  <table
+    style={{
+      width: '48%',
+      borderCollapse: 'separate',
+      borderSpacing: 0,
+      border: '1px solid #E6E6E6',
+      borderRadius: '24px',
+      overflow: 'hidden',
+    }}
+  >
+    <thead>
+      <tr>
+        <th
+          style={{
+            border: '1px solid #E6E6E6',
+            background: '#f9f9f9',
+            padding: '24px 16px',
+            fontWeight: 600,
+            fontSize: '18px',
+            borderTopLeftRadius: '24px',
+            width: '50%',
+            textAlign: 'left',
+          }}
+        >
+          Value
+        </th>
+        <th
+          style={{
+            border: '1px solid #E6E6E6',
+            background: '#f9f9f9',
+            padding: '24px 16px',
+            fontWeight: 600,
+            fontSize: '18px',
+            borderTopRightRadius: '24px',
+            width: '50%',
+            textAlign: 'left',
+          }}
+        >
+          Value
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+{[
+    {
+        color: 'colorCMPrimary100',
+        light: { name: '#DFEFE2', color: '#DFEFE2' },
+    },
+    {
+        color: 'colorCMPrimary200',
+        light: { name: '#BFDFC6', color: '#BFDFC6' },
+    },
+    {
+        color: 'colorCMPrimary300',
+        light: { name: '#9FCFAA', color: '#9FCFAA' },
+    },
+    {
+        color: 'colorCMPrimary400',
+        light: { name: '#7EBE8F', color: '#7EBE8F' },
+    },
+    {
+        color: 'colorCMPrimary500',
+        light: { name: '#5BAE75', color: '#5BAE75' },
+    },
+    {
+        color: 'colorCMPrimary600',
+        light: { name: '#4D8F61', color: '#4D8F61' },
+    },
+    {
+        color: 'colorCMPrimary700',
+        light: { name: '#3E714D', color: '#3E714D' },
+    },
+    {
+        color: 'colorCMPrimary800',
+        light: { name: '#30543B', color: '#30543B' },
+    },
+    {
+        color: 'colorCMPrimary900',
+        light: { name: '#233929', color: '#233929' },
+    },
+    {
+        color: 'colorCMPrimary1000',
+        light: { name: '#161F18', color: '#161F18' },
+    },
+    {
+        color: 'colorCMPrimaryA50',
+        light: { name: '#5BAE75 - 5%', color: 'rgba(91, 174, 117, 0.05)' },
+    },
+    {
+        color: 'colorCMPrimaryA100',
+        light: { name: '#5BAE75 - 10%', color: 'rgba(91, 174, 117, 0.10)' },
+    },
+    {
+        color: 'colorCMPrimaryA150',
+        light: { name: '#5BAE75 - 20%', color: 'rgba(91, 174, 117, 0.20)' },
+    },
+    {
+        color: 'colorCMPrimaryA200',
+        light: { name: '#5BAE75 - 40%', color: 'rgba(91, 174, 117, 0.40)' },
+    },
+]
+.map((row) => (
+        <tr key={row.color}>
+          <td style={{ padding: '24px 16px', border: '1px solid #E6E6E6', background: '#fff',fontSize:'18px' }}>
+            {row.color}
+          </td>
+          <td style={{ padding: '24px 16px', border: '1px solid #E6E6E6', background: '#fff' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <div
+                style={{
+                  width: '32px',
+                  height: '24px',
+                  borderRadius: '1000px',
+                  background: row.light.color,
+                  border: '1px solid #E6E6E6',
+                }}
+              />
+              <span style={{ fontSize: '18px' }}>{row.light.name}</span>
+            </div>
+          </td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+</div>
+
+
+