Text color

website/snippets/_enterprise-permissions-table.md

@@ -48,7 +48,7 @@ Key:
 | Environment credentials |       W       |      -        |       W         |       -        |   R    |
 | Custom env. variables   |       W       |      -        |       W         |       -        |   R    |
 | Data platform configurations|   W       |      -        |       W         |       -        |   R    |
-| Develop (IDE or CLI)       | W       |      -        |       W         |       -        |   -    |
+| Develop (IDE or CLI)    |       W       |      -        |       W         |       -        |   -    |
 | Environments            |       W       |      -        |       W         |       -        |   R    |
 | Jobs                    |       W       |      -        |       W         |       -        |   R    |
 | Metadata GraphQL API access |   R       |      -        |       R         |       -        |   R    |
@@ -65,10 +65,12 @@ Key:
 
 The project roles enable you to work within the projects in various capacities. They primarily provide access to project-level permissions such as repos and the IDE or dbt Cloud CLI, but may also provide some account-level permissions.
 
+<span class="text-green">Test</span>
+
 Key:
 
-* (W)rite &mdash; Create new or modify existing. Includes `send`, `create`, `delete`, `allocate`, `modify`, and `develop`.
-* (R)ead &mdash; Can view but can not create or change any fields.
+* (<span class="text-green">**W**</span>)rite &mdash; Create new or modify existing. Includes `send`, `create`, `delete`, `allocate`, `modify`, and `develop`.
+* (<span class="text-red">**R**</span>)ead &mdash; Can view but can not create or change any fields.
 
 #### Account permissions for project roles
 

website/src/components/TextColor/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import clsx from 'clsx';
+
+const TextColor = ({ color, className, children }) => (
+  <span style={color ? { color } : {}} className={clsx(className)}>
+    {children}
+  </span>
+);
+
+export default TextColor;

website/src/css/custom.css

@@ -2143,4 +2143,14 @@ table th {
 [data-theme='dark'] table th {
   color: #000000; /* Black text on darker background */
   font-weight: bold;
-}
+}
+
+.text-green {
+  color: #009902;
+}
+.text-red {
+  color: #ff171f;
+}
+.text-yellow {
+  color: #f5ea20;
+}

website/src/theme/MDXComponents/index.js

@@ -45,6 +45,7 @@ import Lifecycle from '@site/src/components/lifeCycle';
 import DetailsToggle from '@site/src/components/detailsToggle';
 import Expandable from '@site/src/components/expandable';
 import ConfettiTrigger from '@site/src/components/confetti/';
+import TextColor from '@site/src/components/TextColor';
 
 const MDXComponents = {
   Head,
@@ -97,5 +98,7 @@ const MDXComponents = {
   Expandable: Expandable,
   ConfettiTrigger: ConfettiTrigger,
   SortableTable: SortableTable,
+  TextColor: TextColor,
+
 };
 export default MDXComponents;