adding new background color utilities and a light text utility (#2580)

* adding new background color utilities and a light text utility

* adding a u-text-dark and removing text inherit from u-bg-none

* I don't think we need u-text-inherit

---------

Co-authored-by: Aileen R Jeffries <aileen.jeffries@MacBook-Air.local>

Author: aileenjeffries

src/utilities/background/background.mdx

@@ -0,0 +1,20 @@
+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.
+
+<Canvas of={BackgroundStories.Green} />
+
+<Canvas of={BackgroundStories.Purple} />
+
+<Canvas of={BackgroundStories.Fuchsia} />
+
+<Canvas of={BackgroundStories.Orange} />
+
+<Canvas of={BackgroundStories.None} />
+

src/utilities/background/background.scss

@@ -0,0 +1,21 @@
+@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;
+}

src/utilities/background/background.stories.js

@@ -0,0 +1,58 @@
+/** @import { Args, Meta, StoryObj } from '@storybook/html' */
+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-${textColor} ${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' },
+    },
+    text: {
+      options: ['light', 'dark'],
+    },
+  },
+  render: (args) => backgroundStory(args),
+};
+
+export default meta;
+
+/** @type {StoryObj} */
+export const Green = {
+  args: { color: 'green', text: 'light' },
+};
+
+/** @type {StoryObj} */
+export const Purple = {
+  args: { color: 'purple', text: 'light' },
+};
+
+/** @type {StoryObj} */
+export const Fuchsia = {
+  args: { color: 'fuchsia', text: 'light' },
+};
+
+/** @type {StoryObj} */
+export const Orange = {
+  args: { color: 'orange', text: 'light' },
+};
+
+/** @type {StoryObj} */
+export const None = {
+  args: { color: 'none', text: 'dark' },
+};

src/utilities/text/demo/light.twig

@@ -0,0 +1,12 @@
+{% 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>
+    <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 %}

src/utilities/text/text.scss

@@ -18,6 +18,14 @@
   color: var(--theme-color-text-action) !important;
 }
 
+.u-text-light {
+  color: color.$text-light !important;
+}
+
+.u-text-dark {
+  color: color.$text-dark !important;
+}
+
 /// Size
 
 .u-text-big {

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 and dark text',
+  parameters: { docs: { source: { code: lightDemoSource } } },
+  render: (args) => lightDemo(args),
+};
+
 /** @type {StoryObj} */
 export const TextAlignCenter = {
   name: 'Text-align center',