diff --git a/packages/react/src/components/legend/legend.tsx b/packages/react/src/components/legend/legend.tsx index 1024f596bd..26daeeaac7 100644 --- a/packages/react/src/components/legend/legend.tsx +++ b/packages/react/src/components/legend/legend.tsx @@ -26,7 +26,7 @@ const Item = styled.li>` } ::before { - background-color: ${({ color, theme }) => color || theme.component['legend-item-bullet-background-color']}; + background-color: ${({ color, theme }) => color || theme.component['legend-item-bullet-color']}; border-radius: 50%; content: ''; height: var(--size-half); diff --git a/packages/react/src/components/progress-indicator/bar.tsx b/packages/react/src/components/progress-indicator/bar.tsx index edd18b1eca..5f7aaffcd1 100644 --- a/packages/react/src/components/progress-indicator/bar.tsx +++ b/packages/react/src/components/progress-indicator/bar.tsx @@ -19,7 +19,7 @@ const Container = styled.div` `; const Progress = styled.div` - background-color: ${({ theme }) => theme.component['progress-indicator-background-color']}; + background-color: ${({ theme }) => theme.component['progress-indicator-track-color']}; border-radius: var(--border-radius); height: 0.5rem; margin-bottom: var(--spacing-half); diff --git a/packages/react/src/components/progress-tracker/progress-tracker.tsx b/packages/react/src/components/progress-tracker/progress-tracker.tsx index 92a482abc7..95e24197ea 100644 --- a/packages/react/src/components/progress-tracker/progress-tracker.tsx +++ b/packages/react/src/components/progress-tracker/progress-tracker.tsx @@ -96,7 +96,7 @@ const CompletedStep = styled(StyledStep)` } ${Label} { - color: ${({ theme }) => theme.component['progress-tracker-step-label-completed-text-color']}; + color: ${({ theme }) => theme.component['progress-tracker-step-completed-label-text-color']}; } `; @@ -118,7 +118,7 @@ const ActiveStep = styled(StyledStep)` } ${Label} { - color: ${({ theme }) => theme.component['progress-tracker-step-label-active-text-color']}; + color: ${({ theme }) => theme.component['progress-tracker-step-active-label-text-color']}; font-weight: var(--font-semi-bold); } `; @@ -130,7 +130,7 @@ const UncompletedStep = styled(StyledStep)` } ${Label} { - color: ${({ theme }) => theme.component['progress-tracker-step-label-uncompleted-text-color']}; + color: ${({ theme }) => theme.component['progress-tracker-step-uncompleted-label-text-color']}; } `; diff --git a/packages/react/src/components/status/status.tsx b/packages/react/src/components/status/status.tsx index ca9619d819..412fb3f430 100644 --- a/packages/react/src/components/status/status.tsx +++ b/packages/react/src/components/status/status.tsx @@ -4,11 +4,11 @@ import { ResolvedTheme } from '../../themes/theme'; export type StatusType = 'enabled' | 'disabled' | 'blocked'; -function getCircleBorderStyle(props: {theme: ResolvedTheme, type: StatusType}): string { - const { theme, type } = props; - return `border: ${type === 'disabled' - ? `1px solid ${theme.component['status-circle-disabled-border-color']}` - : 'none'}`; +function getCircleBorderStyle({ theme, type }: {theme: ResolvedTheme, type: StatusType}): string { + if (type === 'disabled') { + return `1px solid ${theme.component['status-circle-disabled-border-color']}`; + } + return 'none'; } const Wrapper = styled.div<{ type: StatusType }>` @@ -19,7 +19,7 @@ const Wrapper = styled.div<{ type: StatusType }>` const Circle = styled.div<{ type: StatusType }>` background-color: ${({ theme, type }) => theme.component[`status-circle-${type}-background-color`]}; - ${getCircleBorderStyle}; + border: ${getCircleBorderStyle}; border-radius: 50%; box-sizing: border-box; height: 0.625rem; diff --git a/packages/react/src/themes/tokens/component/legend-tokens.ts b/packages/react/src/themes/tokens/component/legend-tokens.ts index 47a219cc81..71824f2c07 100644 --- a/packages/react/src/themes/tokens/component/legend-tokens.ts +++ b/packages/react/src/themes/tokens/component/legend-tokens.ts @@ -2,7 +2,7 @@ import { AliasTokens } from '../alias-tokens'; import { RefTokens } from '../ref-tokens'; export type LegendTokens = - | 'legend-item-bullet-background-color' + | 'legend-item-bullet-color' | 'legend-item-description-text-color' export type LegendTokenValue = AliasTokens | RefTokens; @@ -12,6 +12,6 @@ export type LegendTokenMap = { }; export const defaultLegendTokens: LegendTokenMap = { - 'legend-item-bullet-background-color': 'color-brand-20', + 'legend-item-bullet-color': 'color-brand-20', 'legend-item-description-text-color': 'color-neutral-65', }; diff --git a/packages/react/src/themes/tokens/component/progress-indicator-tokens.ts b/packages/react/src/themes/tokens/component/progress-indicator-tokens.ts index 835862a7f0..ae856f56fe 100644 --- a/packages/react/src/themes/tokens/component/progress-indicator-tokens.ts +++ b/packages/react/src/themes/tokens/component/progress-indicator-tokens.ts @@ -2,7 +2,7 @@ import { AliasTokens } from '../alias-tokens'; import { RefTokens } from '../ref-tokens'; export type ProgressIndicatorTokens = - | 'progress-indicator-background-color' + | 'progress-indicator-track-color' | 'progress-indicator-label-text-color' export type ProgressIndicatorTokenValue = AliasTokens | RefTokens; @@ -12,6 +12,6 @@ export type ProgressIndicatorTokenMap = { }; export const defaultProgressIndicatorTokens: ProgressIndicatorTokenMap = { - 'progress-indicator-background-color': 'color-neutral-15', + 'progress-indicator-track-color': 'color-neutral-15', 'progress-indicator-label-text-color': 'color-black', }; diff --git a/packages/react/src/themes/tokens/component/progress-tracker-tokens.ts b/packages/react/src/themes/tokens/component/progress-tracker-tokens.ts index 08d6b4fd9f..d3a340fb53 100644 --- a/packages/react/src/themes/tokens/component/progress-tracker-tokens.ts +++ b/packages/react/src/themes/tokens/component/progress-tracker-tokens.ts @@ -9,16 +9,16 @@ export type ProgressTrackerTokens = | 'progress-tracker-step-todo-background-color' | 'progress-tracker-step-uncompleted-border-color' | 'progress-tracker-step-uncompleted-text-color' - | 'progress-tracker-step-label-uncompleted-text-color' + | 'progress-tracker-step-uncompleted-label-text-color' | 'progress-tracker-bridge-active-background-color' | 'progress-tracker-step-active-border-color' | 'progress-tracker-step-active-text-color' - | 'progress-tracker-step-label-active-text-color' + | 'progress-tracker-step-active-label-text-color' | 'progress-tracker-bridge-completed-color' | 'progress-tracker-step-completed-background-color' | 'progress-tracker-step-completed-border-color' | 'progress-tracker-step-completed-text-color' - | 'progress-tracker-step-label-completed-text-color' + | 'progress-tracker-step-completed-label-text-color' export type ProgressTrackerTokenValue = AliasTokens | RefTokens; @@ -36,16 +36,16 @@ export const defaultProgressTrackerTokens: ProgressTrackerTokenMap = { // Uncompleted 'progress-tracker-step-uncompleted-border-color': 'color-neutral-30', 'progress-tracker-step-uncompleted-text-color': 'color-neutral-90', - 'progress-tracker-step-label-uncompleted-text-color': 'color-neutral-65', + 'progress-tracker-step-uncompleted-label-text-color': 'color-neutral-65', // Active 'progress-tracker-bridge-active-background-color': 'color-brand-50', 'progress-tracker-step-active-border-color': 'color-brand-50', 'progress-tracker-step-active-text-color': 'color-brand-70', - 'progress-tracker-step-label-active-text-color': 'color-brand-70', + 'progress-tracker-step-active-label-text-color': 'color-brand-70', // Completed 'progress-tracker-bridge-completed-color': 'color-brand-50', 'progress-tracker-step-completed-background-color': 'color-brand-50', 'progress-tracker-step-completed-border-color': 'color-brand-50', 'progress-tracker-step-completed-text-color': 'color-white', - 'progress-tracker-step-label-completed-text-color': 'color-brand-50', + 'progress-tracker-step-completed-label-text-color': 'color-brand-50', };