diff --git a/pages/visual-contexts/flashbar.page.tsx b/pages/visual-contexts/flashbar.page.tsx new file mode 100644 index 0000000000..f77f5a3c7e --- /dev/null +++ b/pages/visual-contexts/flashbar.page.tsx @@ -0,0 +1,91 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import React, { useState } from 'react'; + +import { Box, Button, Flashbar, KeyValuePairs, Link, Modal, Popover, ProgressBar, SpaceBetween } from '~components'; + +import { SimplePage } from '../app/templates'; + +export default function () { + const components = [ + { key: 'detail-v1', content: }, + { key: 'detail-v2', content: }, + { + key: 'popover', + content: ( + } header="Popover header"> + Click me + + ), + }, + { key: 'progressbar', content: }, + ]; + + return ( + + + {components.map(({ key, content }) => ( + {content} }, + { id: 'w', type: 'warning', content:
{content}
}, + ]} + /> + ))} + + + ); +} + +function DetailV1() { + const [showModal, setShowModal] = useState(false); + return ( + + Text + + secondary text + + + + link + {showModal && ( + setShowModal(false)} header="Modal"> + + + )} + + ); +} + +function DetailV2() { + return ( + + Info + + ), + }, + ]} + /> + ); +} + +function ProgressBarV1() { + return ( + + ); +} 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 fc7efac8a6..224d8abc91 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap @@ -8112,15 +8112,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-background-button-normal-active": { "$description": "The background color of normal buttons in active state.", "$value": { - "dark": "#16191f", - "light": "#eaeded", + "dark": "rgba(0, 7, 22, 0.2)", + "light": "rgba(0, 7, 22, 0.2)", }, }, "color-background-button-normal-default": { "$description": "The default background color of normal buttons.", "$value": { - "dark": "#2a2e33", - "light": "#ffffff", + "dark": "transparent", + "light": "transparent", }, }, "color-background-button-normal-disabled": { @@ -8133,8 +8133,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-background-button-normal-hover": { "$description": "The background color of normal buttons in hover state.", "$value": { - "dark": "#21252c", - "light": "#fafafa", + "dark": "rgba(0, 7, 22, 0.15)", + "light": "rgba(0, 7, 22, 0.15)", }, }, "color-background-button-primary-active": { @@ -8420,8 +8420,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-background-segment-default": { "$description": "The background color of inactive segments in a segmented control.", "$value": { - "dark": "#2a2e33", - "light": "#ffffff", + "dark": "transparent", + "light": "transparent", }, }, "color-background-segment-disabled": { @@ -8434,8 +8434,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#21252c", - "light": "#fafafa", + "dark": "rgba(0, 7, 22, 0.15)", + "light": "rgba(0, 7, 22, 0.15)", }, }, "color-background-status-error": { @@ -8497,15 +8497,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-border-button-normal-active": { "$description": "The border color of normal buttons in active state.", "$value": { - "dark": "#879596", - "light": "#545b64", + "dark": "#ffffff", + "light": "#ffffff", }, }, "color-border-button-normal-default": { "$description": "The border color of normal buttons.", "$value": { - "dark": "#879596", - "light": "#545b64", + "dark": "#fafafa", + "light": "#fafafa", }, }, "color-border-button-normal-disabled": { @@ -8518,8 +8518,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-border-button-normal-hover": { "$description": "The border color of normal buttons in hover state.", "$value": { - "dark": "#aab7b8", - "light": "#16191f", + "dark": "#ffffff", + "light": "#ffffff", }, }, "color-border-button-primary-disabled": { @@ -9876,8 +9876,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-body-secondary": { "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.", "$value": { - "dark": "#d5dbdb", - "light": "#545b64", + "dark": "#fafafa", + "light": "#fafafa", }, }, "color-text-breadcrumb-current": { @@ -9904,15 +9904,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-button-normal-active": { "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.", "$value": { - "dark": "#fafafa", - "light": "#16191f", + "dark": "#ffffff", + "light": "#ffffff", }, }, "color-text-button-normal-default": { "$description": "The default text color of normal buttons.", "$value": { - "dark": "#d5dbdb", - "light": "#545b64", + "dark": "#fafafa", + "light": "#fafafa", }, }, "color-text-button-normal-disabled": { @@ -9925,8 +9925,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-button-normal-hover": { "$description": "The hover text color of normal buttons.", "$value": { - "dark": "#fafafa", - "light": "#16191f", + "dark": "#ffffff", + "light": "#ffffff", }, }, "color-text-button-primary-active": { @@ -10030,8 +10030,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-group-label": { "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.", "$value": { - "dark": "#95a5a6", - "light": "#545b64", + "dark": "#fafafa", + "light": "#fafafa", }, }, "color-text-heading-default": { @@ -10121,8 +10121,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-label": { "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.", "$value": { - "dark": "#95a5a6", - "light": "#545b64", + "dark": "#fafafa", + "light": "#fafafa", }, }, "color-text-label-gen-ai": { @@ -10163,15 +10163,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-link-default": { "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.", "$value": { - "dark": "#44b9d6", - "light": "#0073bb", + "dark": "#fafafa", + "light": "#fafafa", }, }, "color-text-link-hover": { "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.", "$value": { - "dark": "#99cbe4", - "light": "#0a4a74", + "dark": "#ffffff", + "light": "#ffffff", }, }, "color-text-notification-default": { @@ -10226,15 +10226,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-segment-default": { "$description": "The text color of inactive segments in a segmented control.", "$value": { - "dark": "#d5dbdb", - "light": "#545b64", + "dark": "#fafafa", + "light": "#fafafa", }, }, "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#fafafa", - "light": "#16191f", + "dark": "#ffffff", + "light": "#ffffff", }, }, "color-text-status-error": { @@ -10772,15 +10772,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-background-button-normal-active": { "$description": "The background color of normal buttons in active state.", "$value": { - "dark": "#16191f", - "light": "#eaeded", + "dark": "rgba(0, 7, 22, 0.1)", + "light": "rgba(0, 7, 22, 0.1)", }, }, "color-background-button-normal-default": { "$description": "The default background color of normal buttons.", "$value": { - "dark": "#2a2e33", - "light": "#ffffff", + "dark": "transparent", + "light": "transparent", }, }, "color-background-button-normal-disabled": { @@ -10793,8 +10793,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-background-button-normal-hover": { "$description": "The background color of normal buttons in hover state.", "$value": { - "dark": "#21252c", - "light": "#fafafa", + "dark": "rgba(0, 7, 22, 0.05)", + "light": "rgba(0, 7, 22, 0.05)", }, }, "color-background-button-primary-active": { @@ -11080,8 +11080,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-background-segment-default": { "$description": "The background color of inactive segments in a segmented control.", "$value": { - "dark": "#2a2e33", - "light": "#ffffff", + "dark": "transparent", + "light": "transparent", }, }, "color-background-segment-disabled": { @@ -11094,8 +11094,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-background-segment-hover": { "$description": "The background color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#21252c", - "light": "#fafafa", + "dark": "rgba(0, 7, 22, 0.05)", + "light": "rgba(0, 7, 22, 0.05)", }, }, "color-background-status-error": { @@ -11157,14 +11157,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-border-button-normal-active": { "$description": "The border color of normal buttons in active state.", "$value": { - "dark": "#879596", - "light": "#545b64", + "dark": "#16191f", + "light": "#16191f", }, }, "color-border-button-normal-default": { "$description": "The border color of normal buttons.", "$value": { - "dark": "#879596", + "dark": "#545b64", "light": "#545b64", }, }, @@ -11178,7 +11178,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-border-button-normal-hover": { "$description": "The border color of normal buttons in hover state.", "$value": { - "dark": "#aab7b8", + "dark": "#16191f", "light": "#16191f", }, }, @@ -12536,8 +12536,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-body-secondary": { "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.", "$value": { - "dark": "#d5dbdb", - "light": "#545b64", + "dark": "#16191f", + "light": "#16191f", }, }, "color-text-breadcrumb-current": { @@ -12564,14 +12564,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-button-normal-active": { "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.", "$value": { - "dark": "#fafafa", + "dark": "#16191f", "light": "#16191f", }, }, "color-text-button-normal-default": { "$description": "The default text color of normal buttons.", "$value": { - "dark": "#d5dbdb", + "dark": "#545b64", "light": "#545b64", }, }, @@ -12585,7 +12585,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-button-normal-hover": { "$description": "The hover text color of normal buttons.", "$value": { - "dark": "#fafafa", + "dark": "#16191f", "light": "#16191f", }, }, @@ -12690,8 +12690,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-group-label": { "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.", "$value": { - "dark": "#95a5a6", - "light": "#545b64", + "dark": "#16191f", + "light": "#16191f", }, }, "color-text-heading-default": { @@ -12781,8 +12781,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-label": { "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.", "$value": { - "dark": "#95a5a6", - "light": "#545b64", + "dark": "#16191f", + "light": "#16191f", }, }, "color-text-label-gen-ai": { @@ -12823,15 +12823,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-link-default": { "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.", "$value": { - "dark": "#44b9d6", - "light": "#0073bb", + "dark": "#16191f", + "light": "#16191f", }, }, "color-text-link-hover": { "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.", "$value": { - "dark": "#99cbe4", - "light": "#0a4a74", + "dark": "#16191f", + "light": "#16191f", }, }, "color-text-notification-default": { @@ -12886,14 +12886,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "color-text-segment-default": { "$description": "The text color of inactive segments in a segmented control.", "$value": { - "dark": "#d5dbdb", + "dark": "#545b64", "light": "#545b64", }, }, "color-text-segment-hover": { "$description": "The text color of inactive segments in a segmented control on hover.", "$value": { - "dark": "#fafafa", + "dark": "#16191f", "light": "#16191f", }, }, @@ -31161,8 +31161,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-body-secondary": { "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.", "$value": { - "dark": "#c6c6cd", - "light": "#424650", + "dark": "#f9f9fa", + "light": "#f9f9fa", }, }, "color-text-breadcrumb-current": { @@ -31406,8 +31406,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-label": { "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.", "$value": { - "dark": "#dedee3", - "light": "#0f141a", + "dark": "#f9f9fa", + "light": "#f9f9fa", }, }, "color-text-label-gen-ai": { @@ -31448,15 +31448,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-link-default": { "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.", "$value": { - "dark": "#42b4ff", - "light": "#006ce0", + "dark": "#f9f9fa", + "light": "#f9f9fa", }, }, "color-text-link-hover": { "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.", "$value": { - "dark": "#75cfff", - "light": "#002b66", + "dark": "#ffffff", + "light": "#ffffff", }, }, "color-text-notification-default": { @@ -33821,8 +33821,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-body-secondary": { "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.", "$value": { - "dark": "#c6c6cd", - "light": "#424650", + "dark": "#0f141a", + "light": "#0f141a", }, }, "color-text-breadcrumb-current": { @@ -34066,7 +34066,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-label": { "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.", "$value": { - "dark": "#dedee3", + "dark": "#0f141a", "light": "#0f141a", }, }, @@ -34108,15 +34108,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "color-text-link-default": { "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.", "$value": { - "dark": "#42b4ff", - "light": "#006ce0", + "dark": "#0f141a", + "light": "#0f141a", }, }, "color-text-link-hover": { "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.", "$value": { - "dark": "#75cfff", - "light": "#002b66", + "dark": "#0f141a", + "light": "#0f141a", }, }, "color-text-notification-default": { diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap index f51f9bdadd..99c2f13615 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap @@ -1,4 +1,4 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing exports[`Components definition for alert matches the snapshot: alert 1`] = ` { diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap index 5daaf28ad8..53a76216a5 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap @@ -1,4 +1,4 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing exports[`test-utils selectors 1`] = ` { diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap index 9e433a47f5..96c079421a 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap @@ -1,4 +1,4 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing exports[`Generate test utils ElementWrapper dom ElementWrapper matches the snapshot 1`] = ` " diff --git a/src/internal/hooks/use-portal-mode-classes/index.ts b/src/internal/hooks/use-portal-mode-classes/index.ts index 7032552340..606d36237f 100644 --- a/src/internal/hooks/use-portal-mode-classes/index.ts +++ b/src/internal/hooks/use-portal-mode-classes/index.ts @@ -9,7 +9,7 @@ import { useVisualContext } from '../../components/visual-context'; import { ALWAYS_VISUAL_REFRESH } from '../../environment'; import { useVisualRefresh } from '../use-visual-mode'; -export function usePortalModeClasses(ref: React.RefObject) { +export function usePortalModeClasses(ref: React.RefObject, options?: { resetVisualContext?: boolean }) { const colorMode = useCurrentMode(ref); const densityMode = useDensityMode(ref); const context = useVisualContext(ref); @@ -19,6 +19,6 @@ export function usePortalModeClasses(ref: React.RefObject) { 'awsui-polaris-dark-mode awsui-dark-mode': colorMode === 'dark', 'awsui-polaris-compact-mode awsui-compact-mode': densityMode === 'compact', 'awsui-visual-refresh': visualRefreshWithClass, - [`awsui-context-${context}`]: context, + [`awsui-context-${context}`]: context && !options?.resetVisualContext, }); } diff --git a/src/popover/internal.tsx b/src/popover/internal.tsx index 2ab11bf790..0c866d995e 100644 --- a/src/popover/internal.tsx +++ b/src/popover/internal.tsx @@ -130,7 +130,7 @@ function InternalPopover( }; }, []); - const popoverClasses = usePortalModeClasses(triggerRef); + const popoverClasses = usePortalModeClasses(triggerRef, { resetVisualContext: true }); const triggerProps = { // https://github.com/microsoft/TypeScript/issues/36659 diff --git a/style-dictionary/classic/contexts/flashbar.ts b/style-dictionary/classic/contexts/flashbar.ts index d733fbaf03..00a8182693 100644 --- a/style-dictionary/classic/contexts/flashbar.ts +++ b/style-dictionary/classic/contexts/flashbar.ts @@ -4,21 +4,11 @@ import merge from 'lodash/merge.js'; import { expandColorDictionary } from '../../utils/index.js'; import { StyleDictionary } from '../../utils/interfaces.js'; +import { sharedTokens } from '../../visual-refresh/contexts/flashbar.js'; import { tokens as parentTokens } from '../colors.js'; -const tokens = { - colorBorderItemFocused: '{colorNeutral100}', - colorTextExpandableSectionDefault: '{colorNeutral100}', - colorTextExpandableSectionHover: '{colorNeutral100}', - colorTextBodyDefault: '{colorNeutral100}', - colorTextHeadingSecondary: '{colorNeutral100}', - colorBorderDividerDefault: '{colorNeutral100}', - colorTextTutorialHotspotDefault: '{colorNeutral300}', - colorTextTutorialHotspotHover: '{colorNeutral100}', -}; - const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary( - merge({}, parentTokens, tokens) + merge({}, parentTokens, sharedTokens) ); export { expandedTokens as tokens }; diff --git a/style-dictionary/visual-refresh/contexts/flashbar-warning.ts b/style-dictionary/visual-refresh/contexts/flashbar-warning.ts index 1c1224483b..fe8901652d 100644 --- a/style-dictionary/visual-refresh/contexts/flashbar-warning.ts +++ b/style-dictionary/visual-refresh/contexts/flashbar-warning.ts @@ -7,8 +7,7 @@ import { StyleDictionary } from '../../utils/interfaces.js'; import { tokens as parentTokens } from '../colors.js'; import { alertButtonTokens } from './alert.js'; -// Token configuration that is shared between classic and visual refresh -export const sharedTokens: StyleDictionary.ColorsDictionary = { +const baseTokens: StyleDictionary.ColorsDictionary = { // Links in flash should be using color="inverted", which makes them underlined by default in flashbars // and changes their color to match the surrounding text. colorTextNotificationDefault: '{colorTextNotificationYellow}', @@ -35,6 +34,7 @@ export const sharedTokens: StyleDictionary.ColorsDictionary = { colorTextHeadingSecondary: '{colorTextNotificationYellow}', // Content colorTextBodyDefault: '{colorTextNotificationYellow}', + colorTextBodySecondary: '{colorTextNotificationYellow}', // Tutorial hotspot colorTextTutorialHotspotDefault: '{colorNeutral600}', @@ -42,10 +42,18 @@ export const sharedTokens: StyleDictionary.ColorsDictionary = { // Inline-code variant background in Box colorBackgroundInlineCode: 'rgba(0, 0, 0, 0.1)', + + // Key-value pairs + colorTextLabel: '{colorTextNotificationYellow}', + + // Info links + colorTextLinkDefault: '{colorTextNotificationYellow}', + colorTextLinkHover: '{colorTextNotificationYellow}', }; -const tokens: StyleDictionary.ColorsDictionary = { - ...sharedTokens, +// Token configuration that is shared between classic and visual refresh +export const sharedTokens: StyleDictionary.ColorsDictionary = { + ...baseTokens, // For buttons we use the same tokens as alert. But because the warning flash messages // look the same in light and dark mode, we only pick the light mode colors. @@ -53,7 +61,7 @@ const tokens: StyleDictionary.ColorsDictionary = { }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary( - merge({}, parentTokens, tokens) + merge({}, parentTokens, sharedTokens) ); export { expandedTokens as tokens }; diff --git a/style-dictionary/visual-refresh/contexts/flashbar.ts b/style-dictionary/visual-refresh/contexts/flashbar.ts index 52e05b8dba..053b8cd7ff 100644 --- a/style-dictionary/visual-refresh/contexts/flashbar.ts +++ b/style-dictionary/visual-refresh/contexts/flashbar.ts @@ -6,7 +6,8 @@ import { expandColorDictionary } from '../../utils/index.js'; import { StyleDictionary } from '../../utils/interfaces.js'; import { tokens as parentTokens } from '../colors.js'; -export const baseTokens: StyleDictionary.ColorsDictionary = { +// Token configuration that is shared between classic and visual refresh +export const sharedTokens: StyleDictionary.ColorsDictionary = { colorTextButtonNormalDefault: '{colorNeutral100}', colorBorderButtonNormalDefault: '{colorNeutral100}', colorBackgroundButtonNormalDefault: 'transparent', @@ -20,15 +21,21 @@ export const baseTokens: StyleDictionary.ColorsDictionary = { colorTextExpandableSectionDefault: '{colorNeutral100}', colorTextExpandableSectionHover: '{colorWhite}', colorTextBodyDefault: '{colorNeutral100}', + colorTextBodySecondary: '{colorNeutral100}', colorTextHeadingSecondary: '{colorNeutral100}', colorBorderDividerDefault: '{colorNeutral100}', colorTextTutorialHotspotDefault: '{colorNeutral300}', colorTextTutorialHotspotHover: '{colorNeutral100}', colorBackgroundInlineCode: 'rgba(0, 0, 0, 0.2)', + // Key-value pairs + colorTextLabel: '{colorNeutral100}', + // Info links + colorTextLinkDefault: '{colorNeutral100}', + colorTextLinkHover: '{colorWhite}', }; const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary( - merge({}, parentTokens, baseTokens) + merge({}, parentTokens, sharedTokens) ); export { expandedTokens as tokens };