diff --git a/libs/components/src/stories/colors.stories.mdx b/libs/components/src/stories/colors.stories.mdx
index 255b1e542a00..2daaa0325d1e 100644
--- a/libs/components/src/stories/colors.stories.mdx
+++ b/libs/components/src/stories/colors.stories.mdx
@@ -49,11 +49,18 @@ export const Table = (args) => (
{Row("info-500")}
{Row("info-700")}
+
+
+ Text |
+ |
+
+
{Row("text-main")}
{Row("text-muted")}
{Row("text-contrast")}
{Row("text-alt2")}
+ {Row("text-code")}
);
diff --git a/libs/components/src/tw-theme.css b/libs/components/src/tw-theme.css
index f76c838585de..7acdb02ebf7e 100644
--- a/libs/components/src/tw-theme.css
+++ b/libs/components/src/tw-theme.css
@@ -30,6 +30,7 @@
--color-text-muted: 109 117 126;
--color-text-contrast: 255 255 255;
--color-text-alt2: 255 255 255;
+ --color-text-code: 192 17 118;
--tw-ring-offset-color: #ffffff;
}
@@ -70,6 +71,7 @@
--color-text-muted: 186 192 206;
--color-text-contrast: 25 30 38;
--color-text-alt2: 255 255 255;
+ --color-text-code: 240 141 199;
--tw-ring-offset-color: #1f242e;
}
diff --git a/libs/components/tailwind.config.base.js b/libs/components/tailwind.config.base.js
index 082abe73726e..5abb5694271a 100644
--- a/libs/components/tailwind.config.base.js
+++ b/libs/components/tailwind.config.base.js
@@ -50,6 +50,7 @@ module.exports = {
muted: rgba("--color-text-muted"),
contrast: rgba("--color-text-contrast"),
alt2: rgba("--color-text-alt2"),
+ code: rgba("--color-text-code"),
},
background: {
DEFAULT: rgba("--color-background"),
@@ -62,6 +63,7 @@ module.exports = {
muted: rgba("--color-text-muted"),
contrast: rgba("--color-text-contrast"),
alt2: rgba("--color-text-alt2"),
+ code: rgba("--color-text-code"),
success: rgba("--color-success-500"),
danger: rgba("--color-danger-500"),
warning: rgba("--color-warning-500"),