fix(components,theme): apply @meriouma suggestions

kronostechnologies · Mar 15, 2024 · 5fba2ff · 5fba2ff
1 parent 5f30de2
commit 5fba2ff
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 21 deletions.
diff --git a/packages/react/src/components/legend/legend.tsx b/packages/react/src/components/legend/legend.tsx
@@ -26,7 +26,7 @@ const Item = styled.li<Pick<LegendItem, 'color'>>`
     }
 
     ::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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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',
 };