chore: Explore new box component variant for visual accent

pages/box/style-box.page.tsx

@@ -0,0 +1,191 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Box, { BoxProps } from '~components/box';
+import ButtonDropdown from '~components/button-dropdown';
+import CopyToClipboard from '~components/copy-to-clipboard';
+import Icon from '~components/icon';
+import KeyValuePairs from '~components/key-value-pairs';
+import Link from '~components/link';
+import List from '~components/list';
+import ProgressBar from '~components/progress-bar';
+import SpaceBetween from '~components/space-between';
+import StatusIndicator from '~components/status-indicator';
+
+// ─── Data ──────────────────────────────────────────────────────────────────────
+
+const ALL_VARIANTS: BoxProps.AccentColor[] = [
+  'red',
+  'yellow',
+  'indigo',
+  'green',
+  'orange',
+  'purple',
+  'mint',
+  'lime',
+  'grey',
+];
+
+const BOX_VARIANTS: { variant: BoxProps['variant']; label: string; content: string }[] = [
+  { variant: 'h3', label: 'h3', content: 'Heading 3' },
+  { variant: 'h4', label: 'h4', content: 'Heading 4' },
+  { variant: 'p', label: 'p', content: 'Body paragraph text' },
+];
+
+const LIST_ITEMS: { id: string; content: string; icon: string; color: BoxProps.AccentColor }[] = [
+  { id: 'health', content: 'Health overview', icon: 'face-happy', color: 'green' },
+  { id: 'functions', content: 'Functions', icon: 'script', color: 'indigo' },
+  { id: 'network', content: 'Network configuration', icon: 'globe', color: 'grey' },
+  { id: 'multi-session', content: 'Multi-session data', icon: 'multiscreen', color: 'purple' },
+  { id: 'alert', content: 'Alert center', icon: 'security', color: 'red' },
+  { id: 'communication', content: 'Communication', icon: 'contact', color: 'mint' },
+];
+
+// ─── Page ──────────────────────────────────────────────────────────────────────
+
+export default function StyleBoxPage() {
+  return (
+    <article>
+      <Box variant="h1" padding={{ bottom: 'l' }}>
+        Box variant=&quot;awsui-accent&quot; — Direction 4
+      </Box>
+
+      <Box variant="p" color="text-body-secondary" padding={{ bottom: 'xl' }}>
+        Uses the existing Box component with a new <code>awsui-accent</code> variant and <code>accentColor</code> prop.
+        No wrapper component or utility classes needed.
+      </Box>
+
+      {/* ── Box text variants × accent colors ─────────────────────────── */}
+      <Box variant="h2" padding={{ top: 'l', bottom: 'm' }}>
+        Text inside accent boxes
+      </Box>
+
+      {BOX_VARIANTS.map(({ variant, label, content }) => (
+        <section key={label}>
+          <Box variant="h3" padding={{ top: 'l', bottom: 's' }}>
+            Wrapping Box variant=&quot;{label}&quot;
+          </Box>
+          <SpaceBetween size="m" direction="horizontal">
+            {ALL_VARIANTS.map(color => (
+              <Box key={color} variant="awsui-accent" accentColor={color}>
+                <Box variant={variant}>{content}</Box>
+              </Box>
+            ))}
+          </SpaceBetween>
+        </section>
+      ))}
+
+      {/* ── Icons in accent boxes ─────────────────────────────────────── */}
+      <Box variant="h2" padding={{ top: 'xxxl', bottom: 'm' }}>
+        Icons in accent boxes
+      </Box>
+      <SpaceBetween size="m" direction="horizontal">
+        {ALL_VARIANTS.map(color => (
+          <Box key={color} variant="awsui-accent" accentColor={color}>
+            <Icon name="check" size="medium" variant="subtle" />
+          </Box>
+        ))}
+      </SpaceBetween>
+
+      {/* ── Application in components ──────────────────────────────────── */}
+      <Box variant="h2" padding={{ top: 'xxxl', bottom: 'm' }}>
+        Application in components
+      </Box>
+
+      <Box variant="h3" padding={{ bottom: 's' }}>
+        KeyValuePairs
+      </Box>
+      <KeyValuePairs
+        columns={3}
+        items={[
+          {
+            label: 'Distribution ID',
+            value: (
+              <Box variant="awsui-accent" accentColor="indigo">
+                <Box variant="p">E1WG1ZNPRXT0D4</Box>
+              </Box>
+            ),
+            info: (
+              <Link variant="info" href="#">
+                Info
+              </Link>
+            ),
+          },
+          {
+            label: 'ARN',
+            value: (
+              <CopyToClipboard
+                copyButtonAriaLabel="Copy ARN"
+                copyErrorText="ARN failed to copy"
+                copySuccessText="ARN copied"
+                textToCopy="arn:service23G24::111122223333:distribution/23E1WG1ZNPRXT0D4"
+                variant="inline"
+              />
+            ),
+          },
+          {
+            label: 'Status',
+            value: <StatusIndicator>Available</StatusIndicator>,
+          },
+          {
+            label: 'SSL Certificate',
+            id: 'ssl-certificate-id',
+            value: (
+              <ProgressBar
+                value={30}
+                additionalInfo="Additional information"
+                description="Progress bar description"
+                ariaLabelledby="ssl-certificate-id"
+              />
+            ),
+          },
+          {
+            label: 'Price class',
+            value: (
+              <Box variant="awsui-accent" accentColor="green">
+                <Box variant="p">Use only US, Canada, Europe</Box>
+              </Box>
+            ),
+          },
+          {
+            label: 'CNAMEs',
+            value: (
+              <Link external={true} href="#">
+                abc.service23G24.xyz
+              </Link>
+            ),
+          },
+        ]}
+      />
+
+      <Box variant="h3" padding={{ top: 'xl', bottom: 's' }}>
+        List
+      </Box>
+      <List
+        ariaLabel="List with accent icon badges"
+        items={LIST_ITEMS}
+        renderItem={item => ({
+          id: item.id,
+          content: item.content,
+          icon: (
+            <Box variant="awsui-accent" accentColor={item.color} color="inherit">
+              <Icon name={item.icon as any} size="medium" />
+            </Box>
+          ),
+          actions: (
+            <ButtonDropdown
+              items={[
+                { id: '1', text: 'Action one' },
+                { id: '2', text: 'Action two' },
+                { id: '3', text: 'Action three' },
+              ]}
+              variant="icon"
+              ariaLabel={`Actions for ${item.content}`}
+            />
+          ),
+        })}
+      />
+    </article>
+  );
+}

src/box/interfaces.ts

@@ -19,10 +19,18 @@ export interface BoxProps extends BaseComponentProps {
    *   styled using "Display large light" typography.
    * - If you set it to `awsui-inline-code`, the component will render a `code` element,
    *   styled with a background and padding for inline code snippets.
+   * - If you set it to `awsui-accent`, the component will render a `span`,
+   *   styled as a visual accent container with background and content color combinations.
+   *   Use with the `accentColor` prop to select a color variant.
    *
    * Override the HTML tag by using property `tagOverride`.
    */
   variant?: BoxProps.Variant;
+  /**
+   * Defines the accent color for the `awsui-style-box` variant.
+   * Only applies when `variant` is set to `awsui-style-box`.
+   */
+  accentColor?: BoxProps.AccentColor;
   /**
    * Overrides the default HTML tag provided by the variant.
    */
@@ -154,7 +162,10 @@ export namespace BoxProps {
     | 'awsui-key-label'
     | 'awsui-gen-ai-label'
     | 'awsui-value-large'
-    | 'awsui-inline-code';
+    | 'awsui-inline-code'
+    | 'awsui-accent';
+
+  export type AccentColor = 'red' | 'yellow' | 'indigo' | 'green' | 'orange' | 'purple' | 'mint' | 'lime' | 'grey';
 
   export type Display = 'block' | 'inline' | 'inline-block' | 'none';
   export type TextAlign = 'left' | 'center' | 'right';

src/box/internal.tsx

@@ -23,6 +23,7 @@ export default function InternalBox({
   fontSize,
   fontWeight,
   color,
+  accentColor,
   children,
   nativeAttributes,
   __internalRootRef,
@@ -37,6 +38,7 @@ export default function InternalBox({
     styles.root,
     styles.box,
     styles[`${variant.replace(/^awsui-/, '')}-variant`],
+    accentColor && styles[`accent-${accentColor}`],
     marginsClassNamesSuffices.map(suffix => styles[`m-${suffix}`]),
     paddingsClassNamesSuffices.map(suffix => styles[`p-${suffix}`]),
     styles[`d-${display}`],
@@ -90,5 +92,9 @@ const getTag = (variant: BoxProps.Variant, tagOverride: BoxProps['tagOverride'])
     return 'code';
   }
 
+  if (variant === 'awsui-accent') {
+    return 'span';
+  }
+
   return variant;
 };

src/box/style-box.scss

@@ -0,0 +1,102 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../internal/styles/tokens' as awsui;
+@use '../internal/styles/utils/theming' as theming;
+
+// ─── Base accent variant ─────────────────────────────────────────────────────
+.accent-variant {
+  display: inline-flex;
+  padding-block: awsui.$space-xxs;
+  padding-inline: awsui.$space-xs;
+  border-start-start-radius: 2px;
+  border-start-end-radius: 2px;
+  border-end-start-radius: 2px;
+  border-end-end-radius: 2px;
+  color: inherit;
+}
+
+// ─── Accent colors ──────────────────────────────────────────────────────────────
+
+.accent-red {
+  background-color: #fff5f5;
+  color: #db0000;
+  @include theming.dark-mode-only {
+    background-color: rgba(82, 0, 0, 0.8);
+    color: #ff7a7a;
+  }
+}
+
+.accent-yellow {
+  background-color: #fffef0;
+  color: #f2b100;
+  @include theming.dark-mode-only {
+    background-color: rgba(87, 58, 0, 0.8);
+    color: #ffe347;
+  }
+}
+
+.accent-indigo {
+  background-color: #f5f7ff;
+  color: #295eff;
+  @include theming.dark-mode-only {
+    background-color: rgba(0, 20, 117, 0.8);
+    color: #7598ff;
+  }
+}
+
+.accent-green {
+  background-color: #effff1;
+  color: #00802f;
+  @include theming.dark-mode-only {
+    background-color: rgba(0, 51, 17, 0.8);
+    color: #00e500;
+  }
+}
+
+.accent-orange {
+  background-color: #fff7f5;
+  color: #db3300;
+  @include theming.dark-mode-only {
+    background-color: rgba(71, 17, 0, 0.8);
+    color: #ff6a3d;
+  }
+}
+
+.accent-purple {
+  background-color: #faf5ff;
+  color: #962eff;
+  @include theming.dark-mode-only {
+    background-color: rgba(48, 0, 97, 0.8);
+    color: #bf80ff;
+  }
+}
+
+.accent-mint {
+  background-color: #ebfff6;
+  color: #008559;
+  @include theming.dark-mode-only {
+    background-color: rgba(0, 51, 34, 0.8);
+    color: #00e582;
+  }
+}
+
+.accent-lime {
+  background-color: #f7ffeb;
+  color: #008a00;
+  @include theming.dark-mode-only {
+    background-color: rgba(0, 46, 0, 0.8);
+    color: #7ae500;
+  }
+}
+
+.accent-grey {
+  background-color: #fcfcfc;
+  color: #6b6b6b;
+  @include theming.dark-mode-only {
+    background-color: rgba(21, 21, 21, 0.8);
+    color: #b7b7b7;
+  }
+}

src/box/styles.scss

@@ -6,6 +6,7 @@
 @use '../internal/styles' as styles;
 @use './text';
 @use './layout';
+@use './style-box';
 
 .root {
   @include styles.default-text-style;