diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index 9dc8d43217..02dd484d27 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/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", diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap index 5e45898473..70785b051b 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap +++ b/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", diff --git a/src/internal/styles/utils/theming.scss b/src/internal/styles/utils/theming.scss index 661b6ed42c..3f09728125 100644 --- a/src/internal/styles/utils/theming.scss +++ b/src/internal/styles/utils/theming.scss @@ -11,3 +11,9 @@ } } } + +@mixin one-theme-only($selector: '') { + :global(#{$selector}.awsui-one-theme) & { + @content; + } +} diff --git a/src/token/__tests__/token.test.tsx b/src/token/__tests__/token.test.tsx index 5ca085fe94..53d6069da3 100644 --- a/src/token/__tests__/token.test.tsx +++ b/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: , + }); + 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 diff --git a/src/token/dismiss-button.tsx b/src/token/dismiss-button.tsx index cc68a85943..708420890f 100644 --- a/src/token/dismiss-button.tsx +++ b/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 ) { + const isOneTheme = isThemeActive(Theme.OneTheme); const analyticsMetadata: GeneratedAnalyticsMetadataTokenDismiss = { action: 'dismiss', detail: { @@ -54,7 +56,7 @@ function DismissButton( aria-label={dismissLabel} {...(disabled || readOnly ? {} : getAnalyticsMetadataAttribute(analyticsMetadata))} > - + ); } diff --git a/src/token/internal.tsx b/src/token/internal.tsx index 62aca483af..8d7bede72e 100644 --- a/src/token/internal.tsx +++ b/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 && {icon}, + __customIcon: icon && {sizedIcon(icon)}, }; } else { return { @@ -95,7 +110,7 @@ function InternalToken({ labelTag, description, tags, - __customIcon: icon && {icon}, + __customIcon: icon && {sizedIcon(icon)}, }; } }; diff --git a/src/token/mixins.scss b/src/token/mixins.scss index 5241de747d..f9c7868a26 100644 --- a/src/token/mixins.scss +++ b/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%; diff --git a/src/token/styles.scss b/src/token/styles.scss index 17a3d0e544..93f189d319 100644 --- a/src/token/styles.scss +++ b/src/token/styles.scss @@ -10,6 +10,7 @@ @use '../internal/generated/custom-css-properties/index.scss' as custom-props; @use './constants' as constants; @use './mixins.scss' as mixins; +@use '../internal/styles/utils/theming' as theming; .root { @include styles.styles-reset; @@ -54,6 +55,12 @@ align-items: center; align-self: center; } + + &:not(&-inline) { + @include theming.one-theme-only { + padding-block-start: 1px; + } + } } .icon { diff --git a/style-dictionary/classic/borders.ts b/style-dictionary/classic/borders.ts index a9e679387d..c6c1ca17b8 100644 --- a/style-dictionary/classic/borders.ts +++ b/style-dictionary/classic/borders.ts @@ -46,6 +46,7 @@ const tokens: StyleDictionary.BordersDictionary = { borderWidthToken: '1px', borderRadiusActionCardDefault: '{borderRadiusCardDefault}', borderRadiusActionCardEmbedded: '{borderRadiusCardEmbedded}', + borderRadiusTokenInline: '{borderRadiusToken}', borderWidthActionCardDefault: '1px', borderWidthActionCardHover: '1px', borderWidthActionCardActive: '1px', diff --git a/style-dictionary/one-theme/borders.ts b/style-dictionary/one-theme/borders.ts index 400d24818d..33a3e1dd6c 100644 --- a/style-dictionary/one-theme/borders.ts +++ b/style-dictionary/one-theme/borders.ts @@ -37,6 +37,7 @@ const tokens: StyleDictionary.BordersDictionary = { borderRadiusPopover: '4px', borderRadiusTabsFocusRing: '4px', borderRadiusToken: '2px', + borderRadiusTokenInline: '{borderRadiusToken}', borderRadiusTutorialPanelItem: '4px', borderRadiusStatusIndicator: '2px', }; diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index 731963679a..4f1b1639ec 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -1011,7 +1011,8 @@ export type BordersTokenName = | 'borderWidthActionCardHover' | 'borderWidthActionCardActive' | 'borderWidthActionCardDisabled' - | 'borderWidthBadge'; + | 'borderWidthBadge' + | 'borderRadiusTokenInline'; export type MotionTokenName = | 'motionDurationExtraFast' | 'motionDurationExtraSlow' diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts index 6b80018bff..3544f174fa 100644 --- a/style-dictionary/visual-refresh/borders.ts +++ b/style-dictionary/visual-refresh/borders.ts @@ -47,6 +47,7 @@ export const tokens: StyleDictionary.BordersDictionary = { borderRadiusTabsFocusRing: '20px', borderRadiusTiles: '{borderRadiusInput}', borderRadiusToken: '{borderRadiusInput}', + borderRadiusTokenInline: '4px', borderRadiusTutorialPanelItem: '{borderRadiusInput}', borderTableStickyWidth: '1px', borderWidthActionCardActive: '{borderWidthCard}', diff --git a/style-dictionary/visual-refresh/metadata/borders.ts b/style-dictionary/visual-refresh/metadata/borders.ts index b99c8081ae..a26ee2a01b 100644 --- a/style-dictionary/visual-refresh/metadata/borders.ts +++ b/style-dictionary/visual-refresh/metadata/borders.ts @@ -109,6 +109,11 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, + borderRadiusTokenInline: { + description: 'The border radius of inline tokens. For example: multiselect component.', + public: true, + themeable: true, + }, borderRadiusChatBubble: { description: 'The border radius of chat bubbles.', public: true,