From 68cddab7bb52e1c03ac8c9e885c583e96bca0244 Mon Sep 17 00:00:00 2001
From: Aileen R Jeffries <aileen.jeffries@MacBook-Air.local>
Date: Mon, 19 Oct 2026 12:49:17 -0700
Subject: [PATCH 1/3] adding new background color utilities and a light text
 utility

---
 src/utilities/background/background.mdx       | 21 ++++++++
 src/utilities/background/background.scss      | 22 ++++++++
 .../background/background.stories.js          | 54 +++++++++++++++++++
 src/utilities/text/demo/light.twig            |  9 ++++
 src/utilities/text/text.scss                  |  4 ++
 src/utilities/text/text.stories.js            |  9 ++++
 6 files changed, 119 insertions(+)
 create mode 100644 src/utilities/background/background.mdx
 create mode 100644 src/utilities/background/background.scss
 create mode 100644 src/utilities/background/background.stories.js
 create mode 100644 src/utilities/text/demo/light.twig

diff --git a/src/utilities/background/background.mdx b/src/utilities/background/background.mdx
new file mode 100644
index 000000000..4b3483d44
--- /dev/null
+++ b/src/utilities/background/background.mdx
@@ -0,0 +1,21 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+
+import * as BackgroundStories from './background.stories.js';
+
+<Meta of={BackgroundStories} />
+
+# Background
+
+These utilities apply background colors. For accessibility purposes, these utilities should be paired with u-text-light.
+The u-bg-none class sets the background to transparent and text color to inherit.
+
+<Canvas of={BackgroundStories.Green} />
+
+<Canvas of={BackgroundStories.Purple} />
+
+<Canvas of={BackgroundStories.Fuchsia} />
+
+<Canvas of={BackgroundStories.Orange} />
+
+<Canvas of={BackgroundStories.None} />
+
diff --git a/src/utilities/background/background.scss b/src/utilities/background/background.scss
new file mode 100644
index 000000000..575e07265
--- /dev/null
+++ b/src/utilities/background/background.scss
@@ -0,0 +1,22 @@
+@use '../../compiled/tokens/scss/color';
+
+.u-bg-green {
+  background: color.$base-green !important;
+}
+
+.u-bg-purple {
+  background: color.$base-purple !important;
+}
+
+.u-bg-fuchsia {
+  background: color.$base-fuchsia !important;
+}
+
+.u-bg-orange {
+  background: color.$base-orange !important;
+}
+
+.u-bg-none {
+  background: transparent !important;
+  color: inherit !important;
+}
diff --git a/src/utilities/background/background.stories.js b/src/utilities/background/background.stories.js
new file mode 100644
index 000000000..831209430
--- /dev/null
+++ b/src/utilities/background/background.stories.js
@@ -0,0 +1,54 @@
+/** @import { Args, Meta, StoryObj } from '@storybook/html' */
+import './background.scss';
+
+/** @param {Args} args */
+const backgroundStory = (args) => {
+  const classNames = [args.color || ''];
+  const className = classNames
+    .map((segment) => (segment.length > 0 ? `u-bg-${segment}` : 'u-bg'))
+    .join(' ');
+  return `<div class="u-text-light ${className}  u-pad-n1">${className}</div>`;
+};
+
+/** @type {Meta} */
+const meta = {
+  title: 'Utilities/Background',
+  argTypes: {
+    color: {
+      options: ['green', 'purple', 'fuchsia', 'orange', 'none'],
+      type: {
+        name: 'enum',
+        value: ['green', 'purple', 'fuchsia', 'orange', 'none'],
+      },
+      control: { type: 'inline-radio' },
+    },
+  },
+  render: (args) => backgroundStory(args),
+};
+
+export default meta;
+
+/** @type {StoryObj} */
+export const Green = {
+  args: { color: 'green' },
+};
+
+/** @type {StoryObj} */
+export const Purple = {
+  args: { color: 'purple' },
+};
+
+/** @type {StoryObj} */
+export const Fuchsia = {
+  args: { color: 'fuchsia' },
+};
+
+/** @type {StoryObj} */
+export const Orange = {
+  args: { color: 'orange' },
+};
+
+/** @type {StoryObj} */
+export const None = {
+  args: { color: 'none' },
+};
diff --git a/src/utilities/text/demo/light.twig b/src/utilities/text/demo/light.twig
new file mode 100644
index 000000000..4006d94e6
--- /dev/null
+++ b/src/utilities/text/demo/light.twig
@@ -0,0 +1,9 @@
+{% embed '@cloudfour/objects/container/container.twig' with {
+  class: 'o-container--pad'
+} only %}
+  {% block content %}
+    <div class="u-bg-green u-pad-n1">
+      <p class="u-text-light">This is text that has the u-text-light utility class applied.</p>
+    </div>
+  {% endblock %}
+{% endembed %}
diff --git a/src/utilities/text/text.scss b/src/utilities/text/text.scss
index 3940ac284..787e50c87 100644
--- a/src/utilities/text/text.scss
+++ b/src/utilities/text/text.scss
@@ -18,6 +18,10 @@
   color: var(--theme-color-text-action) !important;
 }
 
+.u-text-light {
+  color: color.$base-white !important;
+}
+
 /// Size
 
 .u-text-big {
diff --git a/src/utilities/text/text.stories.js b/src/utilities/text/text.stories.js
index c1a2a60a6..b33f23996 100644
--- a/src/utilities/text/text.stories.js
+++ b/src/utilities/text/text.stories.js
@@ -1,6 +1,8 @@
 /** @import { Meta, StoryObj } from '@storybook/html' */
 import colorDemo from './demo/color.twig';
 import colorDemoSource from './demo/color.twig?raw';
+import lightDemo from './demo/light.twig';
+import lightDemoSource from './demo/light.twig?raw';
 import noWrapDemo from './demo/nowrap.twig';
 import noWrapDemoSource from './demo/nowrap.twig?raw';
 import sizeDemo from './demo/size.twig';
@@ -29,6 +31,13 @@ export const ActionText = {
   render: (args) => colorDemo(args),
 };
 
+/** @type {StoryObj} */
+export const LightText = {
+  name: 'Light text',
+  parameters: { docs: { source: { code: lightDemoSource } } },
+  render: (args) => lightDemo(args),
+};
+
 /** @type {StoryObj} */
 export const TextAlignCenter = {
   name: 'Text-align center',

From e78d4e49535ffaba9c27640495e4acdf788d8e71 Mon Sep 17 00:00:00 2001
From: Aileen R Jeffries <aileen.jeffries@MacBook-Air.local>
Date: Tue, 20 Oct 2026 09:44:35 -0700
Subject: [PATCH 2/3] adding a u-text-dark and removing text inherit from
 u-bg-none

---
 src/utilities/background/background.mdx        |  1 -
 src/utilities/background/background.scss       |  1 -
 src/utilities/background/background.stories.js | 16 ++++++++++------
 src/utilities/text/demo/light.twig             |  3 +++
 src/utilities/text/text.scss                   | 10 +++++++++-
 src/utilities/text/text.stories.js             |  2 +-
 6 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/utilities/background/background.mdx b/src/utilities/background/background.mdx
index 4b3483d44..ddb60b52f 100644
--- a/src/utilities/background/background.mdx
+++ b/src/utilities/background/background.mdx
@@ -7,7 +7,6 @@ import * as BackgroundStories from './background.stories.js';
 # Background
 
 These utilities apply background colors. For accessibility purposes, these utilities should be paired with u-text-light.
-The u-bg-none class sets the background to transparent and text color to inherit.
 
 <Canvas of={BackgroundStories.Green} />
 
diff --git a/src/utilities/background/background.scss b/src/utilities/background/background.scss
index 575e07265..966a35202 100644
--- a/src/utilities/background/background.scss
+++ b/src/utilities/background/background.scss
@@ -18,5 +18,4 @@
 
 .u-bg-none {
   background: transparent !important;
-  color: inherit !important;
 }
diff --git a/src/utilities/background/background.stories.js b/src/utilities/background/background.stories.js
index 831209430..7f9673149 100644
--- a/src/utilities/background/background.stories.js
+++ b/src/utilities/background/background.stories.js
@@ -4,10 +4,11 @@ import './background.scss';
 /** @param {Args} args */
 const backgroundStory = (args) => {
   const classNames = [args.color || ''];
+  const textColor = [args.text || ''];
   const className = classNames
     .map((segment) => (segment.length > 0 ? `u-bg-${segment}` : 'u-bg'))
     .join(' ');
-  return `<div class="u-text-light ${className}  u-pad-n1">${className}</div>`;
+  return `<div class="u-text-${textColor} ${className}  u-pad-n1">${className}</div>`;
 };
 
 /** @type {Meta} */
@@ -22,6 +23,9 @@ const meta = {
       },
       control: { type: 'inline-radio' },
     },
+    text: {
+      options: ['light', 'dark'],
+    },
   },
   render: (args) => backgroundStory(args),
 };
@@ -30,25 +34,25 @@ export default meta;
 
 /** @type {StoryObj} */
 export const Green = {
-  args: { color: 'green' },
+  args: { color: 'green', text: 'light' },
 };
 
 /** @type {StoryObj} */
 export const Purple = {
-  args: { color: 'purple' },
+  args: { color: 'purple', text: 'light' },
 };
 
 /** @type {StoryObj} */
 export const Fuchsia = {
-  args: { color: 'fuchsia' },
+  args: { color: 'fuchsia', text: 'light' },
 };
 
 /** @type {StoryObj} */
 export const Orange = {
-  args: { color: 'orange' },
+  args: { color: 'orange', text: 'light' },
 };
 
 /** @type {StoryObj} */
 export const None = {
-  args: { color: 'none' },
+  args: { color: 'none', text: 'dark' },
 };
diff --git a/src/utilities/text/demo/light.twig b/src/utilities/text/demo/light.twig
index 4006d94e6..5beda488d 100644
--- a/src/utilities/text/demo/light.twig
+++ b/src/utilities/text/demo/light.twig
@@ -5,5 +5,8 @@
     <div class="u-bg-green u-pad-n1">
       <p class="u-text-light">This is text that has the u-text-light utility class applied.</p>
     </div>
+    <div class="u-text-light u-pad-n1">
+      <p class="u-text-dark">This is text that has the u-text-dark utility class applied, overriding the u-text-light class applied to the parent element.</p>
+    </div>
   {% endblock %}
 {% endembed %}
diff --git a/src/utilities/text/text.scss b/src/utilities/text/text.scss
index 787e50c87..24a0e9a4a 100644
--- a/src/utilities/text/text.scss
+++ b/src/utilities/text/text.scss
@@ -19,7 +19,15 @@
 }
 
 .u-text-light {
-  color: color.$base-white !important;
+  color: color.$text-light !important;
+}
+
+.u-text-dark {
+  color: color.$text-dark !important;
+}
+
+.u-text-inherit {
+  color: inherit !important;
 }
 
 /// Size
diff --git a/src/utilities/text/text.stories.js b/src/utilities/text/text.stories.js
index b33f23996..c398bf65b 100644
--- a/src/utilities/text/text.stories.js
+++ b/src/utilities/text/text.stories.js
@@ -33,7 +33,7 @@ export const ActionText = {
 
 /** @type {StoryObj} */
 export const LightText = {
-  name: 'Light text',
+  name: 'Light and dark text',
   parameters: { docs: { source: { code: lightDemoSource } } },
   render: (args) => lightDemo(args),
 };

From 320053f24bfd075c564fb573ba4ed6d626ce1b5b Mon Sep 17 00:00:00 2001
From: Aileen R Jeffries <aileen.jeffries@MacBook-Air.local>
Date: Tue, 20 Oct 2026 09:48:13 -0700
Subject: [PATCH 3/3] I don't think we need u-text-inherit

---
 src/utilities/text/text.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/utilities/text/text.scss b/src/utilities/text/text.scss
index 24a0e9a4a..eca23b4fb 100644
--- a/src/utilities/text/text.scss
+++ b/src/utilities/text/text.scss
@@ -26,10 +26,6 @@
   color: color.$text-dark !important;
 }
 
-.u-text-inherit {
-  color: inherit !important;
-}
-
 /// Size
 
 .u-text-big {