From 999e0637f2836aff320aa40473ec5ad52beb7636 Mon Sep 17 00:00:00 2001
From: Oscar Hinton <oscar@oscarhinton.com>
Date: Tue, 10 May 2022 05:11:33 +0200
Subject: [PATCH] Add alt2 text color (#794)

---
 components/src/stories/colors.stories.mdx | 1 +
 components/src/tw-theme.css               | 2 ++
 components/tailwind.config.base.js        | 2 ++
 3 files changed, 5 insertions(+)

diff --git a/components/src/stories/colors.stories.mdx b/components/src/stories/colors.stories.mdx
index f311013544..a75418e457 100644
--- a/components/src/stories/colors.stories.mdx
+++ b/components/src/stories/colors.stories.mdx
@@ -53,6 +53,7 @@ export const Table = (args) => (
       {Row("text-main")}
       {Row("text-muted")}
       {Row("text-contrast")}
+      {Row("text-alt2")}
     </tbody>
   </table>
 );
diff --git a/components/src/tw-theme.css b/components/src/tw-theme.css
index 7a03cba92e..d41b331d4a 100644
--- a/components/src/tw-theme.css
+++ b/components/src/tw-theme.css
@@ -27,6 +27,7 @@
   --color-text-main: #212529;
   --color-text-muted: #6d757e;
   --color-text-contrast: #ffffff;
+  --color-text-alt2: #ffffff;
 
   --tw-ring-offset-color: #fff;
 }
@@ -64,6 +65,7 @@
   --color-text-main: #ffffff;
   --color-text-muted: #bac0ce;
   --color-text-contrast: #191e26;
+  --color-text-alt2: #ffffff;
 
   --tw-ring-offset-color: #1f242e;
 }
diff --git a/components/tailwind.config.base.js b/components/tailwind.config.base.js
index 8b1afb165f..245dec233e 100644
--- a/components/tailwind.config.base.js
+++ b/components/tailwind.config.base.js
@@ -41,6 +41,7 @@ module.exports = {
         main: "var(--color-text-main)",
         muted: "var(--color-text-muted)",
         contrast: "var(--color-text-contrast)",
+        alt2: "var(--color-text-alt2)",
       },
       background: {
         DEFAULT: "var(--color-background)",
@@ -52,6 +53,7 @@ module.exports = {
       main: "var(--color-text-main)",
       muted: "var(--color-text-muted)",
       contrast: "var(--color-text-contrast)",
+      alt2: "var(--color-text-alt2)",
       success: "var(--color-success-500)",
       danger: "var(--color-danger-500)",
       warning: "var(--color-warning-500)",