From eb92833c7d462e89cc5c224b4fc59fb1af2a951a Mon Sep 17 00:00:00 2001
From: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>
Date: Wed, 28 Feb 2024 09:28:27 -0500
Subject: [PATCH] docs: add tag section to color token page  (#3933)

* message

* message

* message

---------

Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>
---
 .../ColorTokenTable/ColorTokenTable.js        |  23 +
 src/data/guidelines/color-tokens.js           | 842 ++++++++++++++++++
 2 files changed, 865 insertions(+)

diff --git a/src/components/ColorTokenTable/ColorTokenTable.js b/src/components/ColorTokenTable/ColorTokenTable.js
index 2a0d6555c4c..704b7af51bc 100644
--- a/src/components/ColorTokenTable/ColorTokenTable.js
+++ b/src/components/ColorTokenTable/ColorTokenTable.js
@@ -412,6 +412,29 @@ export default class ColorTokenTable extends React.Component {
               </tbody>
             </table>
           </div>
+          <div className="cds--col-lg-7">
+            <h3 className="page-h3">Tag</h3>
+          </div>
+          <div className="cds--col-lg-12 cds--no-gutter">
+            <table className="page-table">
+              <thead>
+                <tr>
+                  <th>Token</th>
+                  <th>Role</th>
+                  <th>Value</th>
+                </tr>
+              </thead>
+              <tbody>
+                {Object.keys(colorTokens['tag']).map((token, i) =>
+                  this.renderToken(
+                    token,
+                    colorTokens['tag'][token],
+                    i
+                  )
+                )}
+              </tbody>
+            </table>
+          </div>
         </section>
       </div>
     );
diff --git a/src/data/guidelines/color-tokens.js b/src/data/guidelines/color-tokens.js
index 6e8aabbeb22..92a144c3fd1 100644
--- a/src/data/guidelines/color-tokens.js
+++ b/src/data/guidelines/color-tokens.js
@@ -2348,6 +2348,848 @@ const colorTokens = {
       },
     },
   },
+  tag: {
+    '$tag-background-gray': {
+      role: ['Gray tag background'],
+      value: {
+        white: {
+          name: 'Gray 20',
+          hex: '#e0e0e0',
+        },
+        g10: {
+          name: 'Gray 20',
+          hex: '#e0e0e0',
+        },
+        g90: {
+          name: 'Gray 70',
+          hex: '#525252',
+        },
+        g100: {
+          name: 'Gray 70',
+          hex: '#525252',
+        },
+      },
+    },
+    '$tag-color-gray': {
+      role: ['Gray tag text', 'Gray tag icon'],
+      value: {
+        white: {
+          name: 'Gray 100',
+          hex: '#161616',
+        },
+        g10: {
+          name: 'Gray 100',
+          hex: '#161616',
+        },
+        g90: {
+          name: 'Gray 20',
+          hex: '#e0e0e0',
+        },
+        g100: {
+          name: 'Gray 20',
+          hex: '#e0e0e0',
+        },
+      },
+    },
+    '$tag-hover-gray': {
+      role: ['Gray tag hover for $tag-background-gray'],
+      value: {
+        white: {
+          name: 'Gray 20 hover',
+          hex: '#d1d1d1',
+        },
+        g10: {
+          name: 'Gray 20 hover',
+          hex: '#d1d1d1',
+        },
+        g90: {
+          name: 'Gray 70 hover',
+          hex: '#636363',
+        },
+        g100: {
+          name: 'Gray 70 hover',
+          hex: '#636363',
+        },
+      },
+    },
+    '$tag-border-gray': {
+      role: ['Gray tag border for operational tag'],
+      value: {
+        white: {
+          name: 'Gray 40',
+          hex: '#a8a8a8',
+        },
+        g10: {
+          name: 'Gray 40',
+          hex: '#a8a8a8',
+        },
+        g90: {
+          name: 'Gray 50',
+          hex: '#8d8d8d',
+        },
+        g100: {
+          name: 'Gray 50',
+          hex: '#8d8d8d',
+        },
+      },
+    },
+    '$tag-background-cool-gray': {
+      role: ['Cool gray tag background'],
+      value: {
+        white: {
+          name: 'Cool gray 20',
+          hex: '#dde1e6',
+        },
+        g10: {
+          name: 'Cool gray 20',
+          hex: '#dde1e6',
+        },
+        g90: {
+          name: 'Cool gray 70',
+          hex: '#4d5358',
+        },
+        g100: {
+          name: 'Cool gray 70',
+          hex: '#4d5358',
+        },
+      },
+    },
+    '$tag-color-cool-gray': {
+      role: ['Cool gray tag text', 'Cool gray tag icon'],
+      value: {
+        white: {
+          name: 'Cool gray 100',
+          hex: '#121619',
+        },
+        g10: {
+          name: 'Cool gray 100',
+          hex: '#121619',
+        },
+        g90: {
+          name: 'Cool gray 20',
+          hex: '#dde1e6',
+        },
+        g100: {
+          name: 'Cool gray 20',
+          hex: '#dde1e6',
+        },
+      },
+    },
+    '$tag-hover-cool-gray': {
+      role: ['Cool gray tag hover for $tag-background-cool-gray'],
+      value: {
+        white: {
+          name: 'Cool gray 20 hover',
+          hex: '#cdd3da',
+        },
+        g10: {
+          name: 'Cool gray 20 hover',
+          hex: '#cdd3da',
+        },
+        g90: {
+          name: 'Cool gray 70 hover',
+          hex: '#5d646a',
+        },
+        g100: {
+          name: 'Cool gray 70 hover',
+          hex: '#5d646a',
+        },
+      },
+    },
+    '$tag-border-cool-gray': {
+      role: ['Cool gray tag border for operational tag'],
+      value: {
+        white: {
+          name: 'Cool gray 40',
+          hex: '#a2a9b0',
+        },
+        g10: {
+          name: 'Cool gray 40',
+          hex: '#a2a9b0',
+        },
+        g90: {
+          name: 'Cool gray 50',
+          hex: '#878d96',
+        },
+        g100: {
+          name: 'Cool gray 50',
+          hex: '#878d96',
+        },
+      },
+    },
+    '$tag-background-warm-gray': {
+      role: ['Warm gray tag background'],
+      value: {
+        white: {
+          name: 'Warm gray 20',
+          hex: '#e5e0df',
+        },
+        g10: {
+          name: 'Warm gray 20',
+          hex: '#e5e0df',
+        },
+        g90: {
+          name: 'Warm gray 70',
+          hex: '#565151',
+        },
+        g100: {
+          name: 'Warm gray 70',
+          hex: '#565151',
+        },
+      },
+    },
+    '$tag-color-warm-gray': {
+      role: ['Warm gray tag text', 'Warm gray tag icon'],
+      value: {
+        white: {
+          name: 'Warm gray 100',
+          hex: '#171414',
+        },
+        g10: {
+          name: 'Warm gray 100',
+          hex: '#171414',
+        },
+        g90: {
+          name: 'Warm gray 20',
+          hex: '#e5e0df',
+        },
+        g100: {
+          name: 'Warm gray 20',
+          hex: '#e5e0df',
+        },
+      },
+    },
+    '$tag-hover-warm-gray': {
+      role: ['Warm gray tag hover for $tag-background-warm-gray'],
+      value: {
+        white: {
+          name: 'Warm gray 20 hover',
+          hex: '#d8d0cf',
+        },
+        g10: {
+          name: 'Warm gray 20 hover',
+          hex: '#d8d0cf',
+        },
+        g90: {
+          name: 'Warm gray 70 hover',
+          hex: '#696363',
+        },
+        g100: {
+          name: 'Warm gray 70 hover',
+          hex: '#696363',
+        },
+      },
+    },
+    '$tag-border-warm-gray': {
+      role: ['Warm gray tag border for operational tag'],
+      value: {
+        white: {
+          name: 'Warm gray 40',
+          hex: '#ada8a8',
+        },
+        g10: {
+          name: 'Warm gray 40',
+          hex: '#ada8a8',
+        },
+        g90: {
+          name: 'Warm gray 50',
+          hex: '#8f8b8b',
+        },
+        g100: {
+          name: 'Warm gray 50',
+          hex: '#8f8b8b',
+        },
+      },
+    },
+    '$tag-background-red': {
+      role: ['Red tag background'],
+      value: {
+        white: {
+          name: 'Red 20',
+          hex: '#ffd7d9',
+        },
+        g10: {
+          name: 'Red 20',
+          hex: '#ffd7d9',
+        },
+        g90: {
+          name: 'Red 70',
+          hex: '#a2191f',
+        },
+        g100: {
+          name: 'Red 70',
+          hex: '#a2191f',
+        },
+      },
+    },
+    '$tag-color-red': {
+      role: ['Red tag text', 'Red tag icon'],
+      value: {
+        white: {
+          name: 'Red 70',
+          hex: '#a2191f',
+        },
+        g10: {
+          name: 'Red 70',
+          hex: '#a2191f',
+        },
+        g90: {
+          name: 'Red 20',
+          hex: '#ffd7d9',
+        },
+        g100: {
+          name: 'Red 20',
+          hex: '#ffd7d9',
+        },
+      },
+    },
+    '$tag-hover-red': {
+      role: ['Red tag hover for $tag-background-red'],
+      value: {
+        white: {
+          name: 'Red 20 hover',
+          hex: '#ffc2c5',
+        },
+        g10: {
+          name: 'Red 20 hover',
+          hex: '#ffc2c5',
+        },
+        g90: {
+          name: 'Red 70 hover',
+          hex: '#c21e25',
+        },
+        g100: {
+          name: 'Red 70 hover',
+          hex: '#c21e25',
+        },
+      },
+    },
+    '$tag-border-red': {
+      role: ['Red tag border for operational tag'],
+      value: {
+        white: {
+          name: 'Red 40',
+          hex: '#ff8389',
+        },
+        g10: {
+          name: 'Red 40',
+          hex: '#ff8389',
+        },
+        g90: {
+          name: 'Red 50',
+          hex: '#fa4d56',
+        },
+        g100: {
+          name: 'Red 50',
+          hex: '#fa4d56',
+        },
+      },
+    },
+    '$tag-background-magenta': {
+      role: ['Magenta tag background'],
+      value: {
+        white: {
+          name: 'Magenta 20',
+          hex: '#ffd6e8',
+        },
+        g10: {
+          name: 'Magenta 20',
+          hex: '#ffd6e8',
+        },
+        g90: {
+          name: 'Magenta 70',
+          hex: '#9f1853',
+        },
+        g100: {
+          name: 'Magenta 70',
+          hex: '#9f1853',
+        },
+      },
+    },
+    '$tag-color-magenta': {
+      role: ['Magenta tag text', 'Magenta tag icon'],
+      value: {
+        white: {
+          name: 'Magenta 70',
+          hex: '#9f1853',
+        },
+        g10: {
+          name: 'Magenta 70',
+          hex: '#9f1853',
+        },
+        g90: {
+          name: 'Magenta 20',
+          hex: '#ffd6e8',
+        },
+        g100: {
+          name: 'Magenta 20',
+          hex: '#ffd6e8',
+        },
+      },
+    },
+    '$tag-hover-magenta': {
+      role: ['Magenta tag hover for $tag-background-magenta'],
+      value: {
+        white: {
+          name: 'Magenta 20 hover',
+          hex: '#ffbdda',
+        },
+        g10: {
+          name: 'Magenta 20 hover',
+          hex: '#ffbdda',
+        },
+        g90: {
+          name: 'Magenta 70 hover',
+          hex: '#bf1d63',
+        },
+        g100: {
+          name: 'Magenta 70 hover',
+          hex: '#bf1d63',
+        },
+      },
+    },
+    '$tag-border-magenta': {
+      role: ['Magenta tag border for operational tag'],
+      value: {
+        white: {
+          name: 'Magenta 40',
+          hex: '#ff7eb6',
+        },
+        g10: {
+          name: 'Magenta 40',
+          hex: '#ff7eb6',
+        },
+        g90: {
+          name: 'Magenta 50',
+          hex: '#ee5396',
+        },
+        g100: {
+          name: 'Magenta 50',
+          hex: '#ee5396',
+        },
+      },
+    },
+    '$tag-background-purple': {
+      role: ['Purple tag background'],
+      value: {
+        white: {
+          name: 'Purple 20',
+          hex: '#e8daff',
+        },
+        g10: {
+          name: 'Purple 20',
+          hex: '#e8daff',
+        },
+        g90: {
+          name: 'Purple 70',
+          hex: '#6929c4',
+        },
+        g100: {
+          name: 'Purple 70',
+          hex: '#6929c4',
+        },
+      },
+    },
+    '$tag-color-purple': {
+      role: ['Purple tag text', 'Purple tag icon'],
+      value: {
+        white: {
+          name: 'Purple 70',
+          hex: '#6929c4',
+        },
+        g10: {
+          name: 'Purple 70',
+          hex: '#6929c4',
+        },
+        g90: {
+          name: 'Purple 20',
+          hex: '#e8daff',
+        },
+        g100: {
+          name: 'Purple 20',
+          hex: '#e8daff',
+        },
+      },
+    },
+    '$tag-hover-purple': {
+      role: ['Purple tag hover for $tag-background-purple'],
+      value: {
+        white: {
+          name: 'Purple 20 hover',
+          hex: '#dcc7ff',
+        },
+        g10: {
+          name: 'Purple 20 hover',
+          hex: '#dcc7ff',
+        },
+        g90: {
+          name: 'Purple 70 hover',
+          hex: '#7c3dd6',
+        },
+        g100: {
+          name: 'Purple 70 hover',
+          hex: '#7c3dd6',
+        },
+      },
+    },
+    '$tag-border-purple': {
+      role: ['Purple tag border for operational tag'],
+      value: {
+        white: {
+          name: 'Purple 40',
+          hex: '#be95ff',
+        },
+        g10: {
+          name: 'Purple 40',
+          hex: '#be95ff',
+        },
+        g90: {
+          name: 'Purple 50',
+          hex: '#a56eff',
+        },
+        g100: {
+          name: 'Purple 50',
+          hex: '#a56eff',
+        },
+      },
+    },
+    '$tag-background-blue': {
+      role: ['Blue tag background'],
+      value: {
+        white: {
+          name: 'Blue 20',
+          hex: '#d0e2ff',
+        },
+        g10: {
+          name: 'Blue 20',
+          hex: '#d0e2ff',
+        },
+        g90: {
+          name: 'Blue 70',
+          hex: '#0043ce',
+        },
+        g100: {
+          name: 'Blue 70',
+          hex: '#0043ce',
+        },
+      },
+    },
+    '$tag-color-blue': {
+      role: ['Blue tag text', 'Blue tag icon'],
+      value: {
+        white: {
+          name: 'Blue 70',
+          hex: '#0043ce',
+        },
+        g10: {
+          name: 'Blue 70',
+          hex: '#0043ce',
+        },
+        g90: {
+          name: 'Blue 20',
+          hex: '#d0e2ff',
+        },
+        g100: {
+          name: 'Blue 20',
+          hex: '#d0e2ff',
+        },
+      },
+    },
+    '$tag-hover-blue': {
+      role: ['Blue tag hover for $tag-background-blue'],
+      value: {
+        white: {
+          name: 'Blue 20 hover',
+          hex: '#b8d3ff',
+        },
+        g10: {
+          name: 'Blue 20 hover',
+          hex: '#b8d3ff',
+        },
+        g90: {
+          name: 'Blue 70 hover',
+          hex: '#0053ff',
+        },
+        g100: {
+          name: 'Blue 70 hover',
+          hex: '#0053ff',
+        },
+      },
+    },
+    '$tag-border-blue': {
+      role: ['Blue tag border for operational tag'],
+      value: {
+        white: {
+          name: 'Blue 40',
+          hex: '#78a9ff',
+        },
+        g10: {
+          name: 'Blue 40',
+          hex: '#78a9ff',
+        },
+        g90: {
+          name: 'Blue 50',
+          hex: '#4589ff',
+        },
+        g100: {
+          name: 'Blue 50',
+          hex: '#4589ff',
+        },
+      },
+    },
+    '$tag-background-cyan': {
+      role: ['Cyan tag background'],
+      value: {
+        white: {
+          name: 'Cyan 20',
+          hex: '#bae6ff',
+        },
+        g10: {
+          name: 'Cyan 20',
+          hex: '#bae6ff',
+        },
+        g90: {
+          name: 'Cyan 70',
+          hex: '#00539a',
+        },
+        g100: {
+          name: 'Cyan 70',
+          hex: '#00539a',
+        },
+      },
+    },
+    '$tag-color-cyan': {
+      role: ['Cyan tag text', 'Cyan tag icon'],
+      value: {
+        white: {
+          name: 'Cyan 70',
+          hex: '#00539a',
+        },
+        g10: {
+          name: 'Cyan 70',
+          hex: '#00539a',
+        },
+        g90: {
+          name: 'Cyan 20',
+          hex: '#bae6ff',
+        },
+        g100: {
+          name: 'Cyan 20',
+          hex: '#bae6ff',
+        },
+      },
+    },
+    '$tag-hover-cyan': {
+      role: ['Cyan tag hover for $tag-background-cyan'],
+      value: {
+        white: {
+          name: 'Cyan 20 hover',
+          hex: '#99daff',
+        },
+        g10: {
+          name: 'Cyan 20 hover',
+          hex: '#99daff',
+        },
+        g90: {
+          name: 'Cyan 70 hover',
+          hex: '#bae6ff',
+        },
+        g100: {
+          name: 'Cyan 70 hover',
+          hex: '#bae6ff',
+        },
+      },
+    },
+    '$tag-border-cyan': {
+      role: ['Cyan tag border for operational tag'],
+      value: {
+        white: {
+          name: 'Cyan 40',
+          hex: '#33b1ff',
+        },
+        g10: {
+          name: 'Cyan 40',
+          hex: '#33b1ff',
+        },
+        g90: {
+          name: 'Cyan 50',
+          hex: '#1192e8',
+        },
+        g100: {
+          name: 'Cyan 50',
+          hex: '#1192e8',
+        },
+      },
+    },
+    '$tag-background-teal': {
+      role: ['Teal tag background'],
+      value: {
+        white: {
+          name: 'Teal 20',
+          hex: '#9ef0f0',
+        },
+        g10: {
+          name: 'Teal 20',
+          hex: '#9ef0f0',
+        },
+        g90: {
+          name: 'Teal 70',
+          hex: '#005D5D',
+        },
+        g100: {
+          name: 'Teal 70',
+          hex: '#005D5D',
+        },
+      },
+    },
+    '$tag-color-teal': {
+      role: ['Teal tag text', 'Teal tag icon'],
+      value: {
+        white: {
+          name: 'Teal 70',
+          hex: '#005d5d',
+        },
+        g10: {
+          name: 'Teal 70',
+          hex: '#005d5d',
+        },
+        g90: {
+          name: 'Teal 20',
+          hex: '#9ef0f0',
+        },
+        g100: {
+          name: 'Teal 20',
+          hex: '#9ef0f0',
+        },
+      },
+    },
+    '$tag-hover-teal': {
+      role: ['Teal tag hover for $tag-background-teal'],
+      value: {
+        white: {
+          name: 'Teal 20 hover',
+          hex: '#57e5e5',
+        },
+        g10: {
+          name: 'Teal 20 hover',
+          hex: '#57e5e5',
+        },
+        g90: {
+          name: 'Teal 70 hover',
+          hex: '#007070',
+        },
+        g100: {
+          name: 'Teal 70 hover',
+          hex: '#007070',
+        },
+      },
+    },
+    '$tag-border-teal': {
+      role: ['Teal tag border for operational tag'],
+      value: {
+        white: {
+          name: 'Teal 40',
+          hex: '#08bdba',
+        },
+        g10: {
+          name: 'Teal 40',
+          hex: '#08bdba',
+        },
+        g90: {
+          name: 'Teal 50',
+          hex: '#009d9a',
+        },
+        g100: {
+          name: 'Teal 50',
+          hex: '#009d9a',
+        },
+      },
+    },
+    '$tag-background-green': {
+      role: ['Green tag background'],
+      value: {
+        white: {
+          name: 'Green 20',
+          hex: '#a7f0ba',
+        },
+        g10: {
+          name: 'Green 20',
+          hex: '#a7f0ba',
+        },
+        g90: {
+          name: 'Green 70',
+          hex: '#0e6027',
+        },
+        g100: {
+          name: 'Green 70',
+          hex: '#0e6027',
+        },
+      },
+    },
+    '$tag-color-green': {
+      role: ['Green tag text', 'Green tag icon'],
+      value: {
+        white: {
+          name: 'Green 70',
+          hex: '#0e6027',
+        },
+        g10: {
+          name: 'Green 70',
+          hex: '#0e6027',
+        },
+        g90: {
+          name: 'Green 20',
+          hex: '#a7f0ba',
+        },
+        g100: {
+          name: 'Green 20',
+          hex: '#a7f0ba',
+        },
+      },
+    },
+    '$tag-hover-green': {
+      role: ['Green tag hover for $tag-background-green'],
+      value: {
+        white: {
+          name: 'Green 20 hover',
+          hex: '#74e792',
+        },
+        g10: {
+          name: 'Green 20 hover',
+          hex: '#74e792',
+        },
+        g90: {
+          name: 'Green 70 hover',
+          hex: '#11742f',
+        },
+        g100: {
+          name: 'Green 70 hover',
+          hex: '#11742f',
+        },
+      },
+    },
+    '$tag-border-green': {
+      role: ['Green tag border for operational tag'],
+      value: {
+        white: {
+          name: 'Green 40',
+          hex: '#42be65',
+        },
+        g10: {
+          name: 'Green 40',
+          hex: '#42be65',
+        },
+        g90: {
+          name: 'Green 50',
+          hex: '#24a148',
+        },
+        g100: {
+          name: 'Green 50',
+          hex: '#24a148',
+        },
+      },
+    },
+  },
 };
 
 export default colorTokens;
\ No newline at end of file