feat: Update token component styles for one-theme

src/__integ__/__snapshots__/themes.test.ts.snap

@@ -47,6 +47,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "border-radius-tabs-focus-ring": "0px",
   "border-radius-tiles": "2px",
   "border-radius-token": "2px",
+  "border-radius-token-inline": "2px",
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-action-card-active": "1px",
@@ -946,6 +947,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "border-radius-tabs-focus-ring": "0px",
   "border-radius-tiles": "2px",
   "border-radius-token": "2px",
+  "border-radius-token-inline": "2px",
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-action-card-active": "1px",
@@ -1845,6 +1847,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "border-radius-tabs-focus-ring": "0px",
   "border-radius-tiles": "2px",
   "border-radius-token": "2px",
+  "border-radius-token-inline": "2px",
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-action-card-active": "1px",
@@ -2744,6 +2747,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "border-radius-tabs-focus-ring": "0px",
   "border-radius-tiles": "2px",
   "border-radius-token": "2px",
+  "border-radius-token-inline": "2px",
   "border-radius-tutorial-panel-item": "2px",
   "border-table-sticky-width": "0px",
   "border-width-action-card-active": "1px",
@@ -3643,6 +3647,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-radius-tabs-focus-ring": "20px",
   "border-radius-tiles": "8px",
   "border-radius-token": "8px",
+  "border-radius-token-inline": "4px",
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-action-card-active": "1px",
@@ -4542,6 +4547,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-tabs-focus-ring": "20px",
   "border-radius-tiles": "8px",
   "border-radius-token": "8px",
+  "border-radius-token-inline": "4px",
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-action-card-active": "1px",
@@ -5441,6 +5447,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-tabs-focus-ring": "20px",
   "border-radius-tiles": "8px",
   "border-radius-token": "8px",
+  "border-radius-token-inline": "4px",
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-action-card-active": "1px",
@@ -6340,6 +6347,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-radius-tabs-focus-ring": "20px",
   "border-radius-tiles": "8px",
   "border-radius-token": "8px",
+  "border-radius-token-inline": "4px",
   "border-radius-tutorial-panel-item": "8px",
   "border-table-sticky-width": "1px",
   "border-width-action-card-active": "1px",

src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap

@@ -89,6 +89,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
           "$value": "2px",
         },
+        "border-radius-token-inline": {
+          "$description": "The border radius of inline tokens. For example: multiselect component.",
+          "$value": "2px",
+        },
         "border-radius-tutorial-panel-item": {
           "$description": "The border radius of tutorials inside a tutorial panel.",
           "$value": "2px",
@@ -3529,6 +3533,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
           "$value": "2px",
         },
+        "border-radius-token-inline": {
+          "$description": "The border radius of inline tokens. For example: multiselect component.",
+          "$value": "2px",
+        },
         "border-radius-tutorial-panel-item": {
           "$description": "The border radius of tutorials inside a tutorial panel.",
           "$value": "2px",
@@ -6969,6 +6977,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
           "$value": "2px",
         },
+        "border-radius-token-inline": {
+          "$description": "The border radius of inline tokens. For example: multiselect component.",
+          "$value": "2px",
+        },
         "border-radius-tutorial-panel-item": {
           "$description": "The border radius of tutorials inside a tutorial panel.",
           "$value": "2px",
@@ -10409,6 +10421,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
           "$value": "2px",
         },
+        "border-radius-token-inline": {
+          "$description": "The border radius of inline tokens. For example: multiselect component.",
+          "$value": "2px",
+        },
         "border-radius-tutorial-panel-item": {
           "$description": "The border radius of tutorials inside a tutorial panel.",
           "$value": "2px",
@@ -13849,6 +13865,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
           "$value": "2px",
         },
+        "border-radius-token-inline": {
+          "$description": "The border radius of inline tokens. For example: multiselect component.",
+          "$value": "2px",
+        },
         "border-radius-tutorial-panel-item": {
           "$description": "The border radius of tutorials inside a tutorial panel.",
           "$value": "2px",
@@ -17289,6 +17309,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
           "$value": "2px",
         },
+        "border-radius-token-inline": {
+          "$description": "The border radius of inline tokens. For example: multiselect component.",
+          "$value": "2px",
+        },
         "border-radius-tutorial-panel-item": {
           "$description": "The border radius of tutorials inside a tutorial panel.",
           "$value": "2px",
@@ -20729,6 +20753,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
       "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
       "$value": "2px",
     },
+    "border-radius-token-inline": {
+      "$description": "The border radius of inline tokens. For example: multiselect component.",
+      "$value": "2px",
+    },
     "border-radius-tutorial-panel-item": {
       "$description": "The border radius of tutorials inside a tutorial panel.",
       "$value": "2px",
@@ -24174,6 +24202,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
           "$value": "8px",
         },
+        "border-radius-token-inline": {
+          "$description": "The border radius of inline tokens. For example: multiselect component.",
+          "$value": "4px",
+        },
         "border-radius-tutorial-panel-item": {
           "$description": "The border radius of tutorials inside a tutorial panel.",
           "$value": "8px",
@@ -27614,6 +27646,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
           "$value": "8px",
         },
+        "border-radius-token-inline": {
+          "$description": "The border radius of inline tokens. For example: multiselect component.",
+          "$value": "4px",
+        },
         "border-radius-tutorial-panel-item": {
           "$description": "The border radius of tutorials inside a tutorial panel.",
           "$value": "8px",
@@ -31054,6 +31090,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
           "$value": "8px",
         },
+        "border-radius-token-inline": {
+          "$description": "The border radius of inline tokens. For example: multiselect component.",
+          "$value": "4px",
+        },
         "border-radius-tutorial-panel-item": {
           "$description": "The border radius of tutorials inside a tutorial panel.",
           "$value": "8px",
@@ -34494,6 +34534,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
           "$value": "8px",
         },
+        "border-radius-token-inline": {
+          "$description": "The border radius of inline tokens. For example: multiselect component.",
+          "$value": "4px",
+        },
         "border-radius-tutorial-panel-item": {
           "$description": "The border radius of tutorials inside a tutorial panel.",
           "$value": "8px",
@@ -37934,6 +37978,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
           "$value": "8px",
         },
+        "border-radius-token-inline": {
+          "$description": "The border radius of inline tokens. For example: multiselect component.",
+          "$value": "4px",
+        },
         "border-radius-tutorial-panel-item": {
           "$description": "The border radius of tutorials inside a tutorial panel.",
           "$value": "8px",
@@ -41374,6 +41422,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
           "$value": "8px",
         },
+        "border-radius-token-inline": {
+          "$description": "The border radius of inline tokens. For example: multiselect component.",
+          "$value": "4px",
+        },
         "border-radius-tutorial-panel-item": {
           "$description": "The border radius of tutorials inside a tutorial panel.",
           "$value": "8px",
@@ -44814,6 +44866,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
           "$value": "8px",
         },
+        "border-radius-token-inline": {
+          "$description": "The border radius of inline tokens. For example: multiselect component.",
+          "$value": "4px",
+        },
         "border-radius-tutorial-panel-item": {
           "$description": "The border radius of tutorials inside a tutorial panel.",
           "$value": "8px",
@@ -48254,6 +48310,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
           "$value": "8px",
         },
+        "border-radius-token-inline": {
+          "$description": "The border radius of inline tokens. For example: multiselect component.",
+          "$value": "4px",
+        },
         "border-radius-tutorial-panel-item": {
           "$description": "The border radius of tutorials inside a tutorial panel.",
           "$value": "8px",
@@ -51694,6 +51754,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
       "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
       "$value": "8px",
     },
+    "border-radius-token-inline": {
+      "$description": "The border radius of inline tokens. For example: multiselect component.",
+      "$value": "4px",
+    },
     "border-radius-tutorial-panel-item": {
       "$description": "The border radius of tutorials inside a tutorial panel.",
       "$value": "8px",

src/internal/styles/utils/theming.scss

@@ -11,3 +11,9 @@
     }
   }
 }
+
+@mixin one-theme-only($selector: '') {
+  :global(#{$selector}.awsui-one-theme) & {
+    @content;
+  }
+}

src/token/__tests__/token.test.tsx

@@ -8,6 +8,7 @@ import createWrapper from '../../../lib/components/test-utils/dom';
 import Token, { TokenProps } from '../../../lib/components/token';
 import InternalToken from '../../../lib/components/token/internal';
 
+import iconStyles from '../../../lib/components/icon/styles.selectors.js';
 import styles from '../../../lib/components/token/styles.selectors.js';
 
 function renderToken(props: TokenProps) {
@@ -154,6 +155,27 @@ describe('Token', () => {
     });
   });
 
+  describe('One theme', () => {
+    beforeEach(() => {
+      document.body.classList.add('awsui-one-theme');
+    });
+
+    afterEach(() => {
+      document.body.classList.remove('awsui-one-theme');
+    });
+
+    test('overrides icon size to x-small for inline variant in OneTheme', () => {
+      renderToken({
+        label: 'Test token',
+        variant: 'inline',
+        icon: <Icon name="settings" size="normal" data-testid="one-theme-inline-icon" />,
+      });
+      const iconElement = screen.getByTestId('one-theme-inline-icon');
+      expect(iconElement).toHaveClass(iconStyles['size-x-small']);
+      expect(iconElement).not.toHaveClass(iconStyles['size-normal']);
+    });
+  });
+
   describe('Error handling for inline variants', () => {
     test('React elements trigger a dev warning', () => {
       // Mock console.warn to capture the warning

src/token/dismiss-button.tsx

@@ -3,6 +3,7 @@
 import React, { forwardRef, Ref } from 'react';
 import clsx from 'clsx';
 
+import { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
 import InternalIcon from '../icon/internal';
@@ -27,6 +28,7 @@ function DismissButton(
   { disabled, dismissLabel, onDismiss, readOnly, inline }: DismissButtonProps,
   ref: Ref<HTMLButtonElement>
 ) {
+  const isOneTheme = isThemeActive(Theme.OneTheme);
   const analyticsMetadata: GeneratedAnalyticsMetadataTokenDismiss = {
     action: 'dismiss',
     detail: {
@@ -54,7 +56,7 @@ function DismissButton(
       aria-label={dismissLabel}
       {...(disabled || readOnly ? {} : getAnalyticsMetadataAttribute(analyticsMetadata))}
     >
-      <InternalIcon name="close" />
+      <InternalIcon name="close" size={isOneTheme ? 'x-small' : undefined} />
     </button>
   );
 }

src/token/internal.tsx

@@ -4,8 +4,15 @@
 import React, { useRef, useState } from 'react';
 import clsx from 'clsx';
 
-import { useResizeObserver, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';
-
+import {
+  isThemeActive,
+  Theme,
+  useResizeObserver,
+  useUniqueId,
+  warnOnce,
+} from '@cloudscape-design/component-toolkit/internal';
+
+import InternalIcon from '../icon/internal';
 import { getBaseProps } from '../internal/base-component';
 import Option from '../internal/components/option';
 import { TokenInlineContext } from '../internal/context/token-inline-context';
@@ -57,6 +64,7 @@ function InternalToken({
   const [showTooltip, setShowTooltip] = useState(false);
   const [isEllipsisActive, setIsEllipsisActive] = useState(false);
   const isInline = variant === 'inline';
+  const isOneTheme = isThemeActive(Theme.OneTheme);
   const ariaLabelledbyId = useUniqueId();
 
   const isLabelOverflowing = () => {
@@ -74,6 +82,13 @@ function InternalToken({
     }
   });
 
+  const sizedIcon = (iconNode: React.ReactNode) => {
+    if (isInline && isOneTheme && React.isValidElement(iconNode) && iconNode.type === InternalIcon) {
+      return React.cloneElement(iconNode, { size: 'x-small' });
+    }
+    return iconNode;
+  };
+
   const buildOptionDefinition = () => {
     const isLabelStringOrNumber = typeof label === 'string' || typeof label === 'number';
     const labelObject = isLabelStringOrNumber ? { label: String(label) } : { labelContent: label };
@@ -86,7 +101,7 @@ function InternalToken({
       return {
         ...labelObject,
         disabled,
-        __customIcon: icon && <span className={clsx(styles.icon, styles['icon-inline'])}>{icon}</span>,
+        __customIcon: icon && <span className={clsx(styles.icon, styles['icon-inline'])}>{sizedIcon(icon)}</span>,
       };
     } else {
       return {
@@ -95,7 +110,7 @@ function InternalToken({
         labelTag,
         description,
         tags,
-        __customIcon: icon && <span className={styles.icon}>{icon}</span>,
+        __customIcon: icon && <span className={styles.icon}>{sizedIcon(icon)}</span>,
       };
     }
   };

src/token/mixins.scss

@@ -42,10 +42,10 @@
   display: flex;
   align-items: center;
   background: var(#{custom-props.$tokenStyleBackgroundDefault}, constants.$token-background);
-  border-start-start-radius: awsui.$space-scaled-xxs;
-  border-start-end-radius: awsui.$space-scaled-xxs;
-  border-end-start-radius: awsui.$space-scaled-xxs;
-  border-end-end-radius: awsui.$space-scaled-xxs;
+  border-start-start-radius: awsui.$border-radius-token-inline;
+  border-start-end-radius: awsui.$border-radius-token-inline;
+  border-end-start-radius: awsui.$border-radius-token-inline;
+  border-end-end-radius: awsui.$border-radius-token-inline;
   color: awsui.$color-text-body-default;
   box-sizing: border-box;
   max-inline-size: 100%;