Skip to content

Commit

Permalink
refactor: design tokens names update TET-341 (#81)
Browse files Browse the repository at this point in the history
  • Loading branch information
@adrian-potepa
adrian-potepa authored Oct 11, 2023
1 parent ab5faac commit 69d596b
Show file tree
Hide file tree
Showing 73 changed files with 3,422 additions and 3,113 deletions.
28 changes: 14 additions & 14 deletions src/components/AlertBanner/AlertBanner.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,39 +13,39 @@ export type AlertBannerConfig = {
} & BaseProps;

export const defaultConfig = {
p: 'component-padding-medium',
pl: 'component-padding-2xLarge',
p: '$space-component-padding-medium',
pl: '$space-component-padding-2xLarge',
display: 'flex',
alignItems: 'center',
text: 'body-medium',
text: '$typo-body-medium',
intent: {
none: {
backgroundColor: 'background-neutral-strong',
color: 'content-primary-inverted',
backgroundColor: '$color-background-neutral-strong',
color: '$color-content-primary-inverted',
},
positive: {
backgroundColor: 'background-positive-strong',
color: 'content-primary-inverted',
backgroundColor: '$color-background-positive-strong',
color: '$color-content-primary-inverted',
},
warning: {
backgroundColor: 'background-warning-strong',
color: 'content-primary',
backgroundColor: '$color-background-warning-strong',
color: '$color-content-primary',
},
negative: {
backgroundColor: 'background-negative-strong',
color: 'content-primary-inverted',
backgroundColor: '$color-background-negative-strong',
color: '$color-content-primary-inverted',
},
},
innerElements: {
iconContainer: {
mr: 'component-gap-small',
mr: '$space-component-gap-small',
},
actionContainer: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: 'component-gap-small',
ml: 'component-gap-large',
gap: '$space-component-gap-small',
ml: '$space-component-gap-large',
},
closeButton: {
ml: 'auto',
Expand Down
8 changes: 4 additions & 4 deletions src/components/AlertBanner/AlertBanner.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,23 +50,23 @@ describe('AlertBanner', () => {
<AlertBanner text="Alert" intent="none" />,
);
expect(alertBanner).toHaveStyle('color: rgb(255,255,255);');
expect(alertBanner).toHaveStyle('background-color: rgb(85,85,85);');
expect(alertBanner).toHaveStyle('background-color: rgb(85, 95, 109);');
});

it('should render correct intent color (positive)', () => {
const alertBanner = getAlertBanner(
<AlertBanner text="Alert" intent="positive" />,
);
expect(alertBanner).toHaveStyle('color: rgb(255,255,255);');
expect(alertBanner).toHaveStyle('background-color: rgb(29,29,29);');
expect(alertBanner).toHaveStyle('background-color: rgb(29, 124, 77);');
});

it('should render correct intent color (warning)', () => {
const alertBanner = getAlertBanner(
<AlertBanner text="Alert" intent="warning" />,
);
expect(alertBanner).toHaveStyle('color: rgb(39,39,39);');
expect(alertBanner).toHaveStyle('background-color: rgb(56,56,56);');
expect(alertBanner).toHaveStyle('color: rgb(39, 46, 53);');
expect(alertBanner).toHaveStyle('background-color: rgb(245, 150, 56);');
});

it('should render correct intent color (negative)', () => {
Expand Down
146 changes: 73 additions & 73 deletions src/components/Avatar/Avatar.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,37 +28,37 @@ export const defaultConfig = {
justifyContent: 'center',
shape: {
rounded: {
borderRadius: 'full',
borderRadius: '$border-radius-full',
},
square: {
borderRadius: 'large',
borderRadius: '$border-radius-large',
},
},
size: {
large: {
w: 'large',
h: 'large',
text: 'body-large',
w: '$size-large',
h: '$size-large',
text: '$typo-body-large',
},
medium: {
w: 'medium',
h: 'medium',
text: 'body-medium',
w: '$size-medium',
h: '$size-medium',
text: '$typo-body-medium',
},
small: {
w: 'small',
h: 'small',
text: 'body-small',
w: '$size-small',
h: '$size-small',
text: '$typo-body-small',
},
xSmall: {
w: 'xSmall',
h: 'xSmall',
text: 'body-strong-xSmall',
w: '$size-xSmall',
h: '$size-xSmall',
text: '$typo-body-strong-xSmall',
},
'2xSmall': {
w: '2xSmall',
h: '2xSmall',
text: 'body-strong-xSmall',
w: '$size-2xSmall',
h: '$size-2xSmall',
text: '$typo-body-strong-xSmall',
},
},
appearance: {
Expand All @@ -71,168 +71,168 @@ export const defaultConfig = {
blue: {
emphasis: {
high: {
color: 'nonSemantic-white-content-primary',
backgroundColor: 'nonSemantic-blue-background-strong',
color: '$color-nonSemantic-white-content-primary',
backgroundColor: '$color-nonSemantic-blue-background-strong',
},
low: {
color: 'nonSemantic-blue-content-primary',
backgroundColor: 'nonSemantic-blue-background-muted',
color: '$color-nonSemantic-blue-content-primary',
backgroundColor: '$color-nonSemantic-blue-background-muted',
},
},
},
green: {
emphasis: {
high: {
color: 'nonSemantic-white-content-primary',
backgroundColor: 'nonSemantic-green-background-strong',
color: '$color-nonSemantic-white-content-primary',
backgroundColor: '$color-nonSemantic-green-background-strong',
},
low: {
color: 'nonSemantic-green-content-primary',
backgroundColor: 'nonSemantic-green-background-muted',
color: '$color-nonSemantic-green-content-primary',
backgroundColor: '$color-nonSemantic-green-background-muted',
},
},
},
grey: {
emphasis: {
high: {
color: 'nonSemantic-white-content-primary',
backgroundColor: 'nonSemantic-grey-background-strong',
color: '$color-nonSemantic-white-content-primary',
backgroundColor: '$color-nonSemantic-grey-background-strong',
},
low: {
color: 'nonSemantic-grey-content-primary',
backgroundColor: 'nonSemantic-grey-background-muted',
color: '$color-nonSemantic-grey-content-primary',
backgroundColor: '$color-nonSemantic-grey-background-muted',
},
},
},
red: {
emphasis: {
high: {
color: 'nonSemantic-white-content-primary',
backgroundColor: 'nonSemantic-red-background-strong',
color: '$color-nonSemantic-white-content-primary',
backgroundColor: '$color-nonSemantic-red-background-strong',
},
low: {
color: 'nonSemantic-red-content-primary',
backgroundColor: 'nonSemantic-red-background-muted',
color: '$color-nonSemantic-red-content-primary',
backgroundColor: '$color-nonSemantic-red-background-muted',
},
},
},
orange: {
emphasis: {
high: {
color: 'nonSemantic-white-content-primary',
backgroundColor: 'nonSemantic-orange-background-strong',
color: '$color-nonSemantic-white-content-primary',
backgroundColor: '$color-nonSemantic-orange-background-strong',
},
low: {
color: 'nonSemantic-orange-content-primary',
backgroundColor: 'nonSemantic-orange-background-muted',
color: '$color-nonSemantic-orange-content-primary',
backgroundColor: '$color-nonSemantic-orange-background-muted',
},
},
},
raspberry: {
emphasis: {
high: {
color: 'nonSemantic-white-content-primary',
backgroundColor: 'nonSemantic-raspberry-background-strong',
color: '$color-nonSemantic-white-content-primary',
backgroundColor: '$color-nonSemantic-raspberry-background-strong',
},
low: {
color: 'nonSemantic-raspberry-content-primary',
backgroundColor: 'nonSemantic-raspberry-background-muted',
color: '$color-nonSemantic-raspberry-content-primary',
backgroundColor: '$color-nonSemantic-raspberry-background-muted',
},
},
},
magenta: {
emphasis: {
high: {
color: 'nonSemantic-white-content-primary',
backgroundColor: 'nonSemantic-magenta-background-strong',
color: '$color-nonSemantic-white-content-primary',
backgroundColor: '$color-nonSemantic-magenta-background-strong',
},
low: {
color: 'nonSemantic-magenta-content-primary',
backgroundColor: 'nonSemantic-magenta-background-muted',
color: '$color-nonSemantic-magenta-content-primary',
backgroundColor: '$color-nonSemantic-magenta-background-muted',
},
},
},
purple: {
emphasis: {
high: {
color: 'nonSemantic-white-content-primary',
backgroundColor: 'nonSemantic-purple-background-strong',
color: '$color-nonSemantic-white-content-primary',
backgroundColor: '$color-nonSemantic-purple-background-strong',
},
low: {
color: 'nonSemantic-purple-content-primary',
backgroundColor: 'nonSemantic-purple-background-muted',
color: '$color-nonSemantic-purple-content-primary',
backgroundColor: '$color-nonSemantic-purple-background-muted',
},
},
},
grape: {
emphasis: {
high: {
color: 'nonSemantic-white-content-primary',
backgroundColor: 'nonSemantic-grape-background-strong',
color: '$color-nonSemantic-white-content-primary',
backgroundColor: '$color-nonSemantic-grape-background-strong',
},
low: {
color: 'nonSemantic-grape-content-primary',
backgroundColor: 'nonSemantic-grape-background-muted',
color: '$color-nonSemantic-grape-content-primary',
backgroundColor: '$color-nonSemantic-grape-background-muted',
},
},
},
violet: {
emphasis: {
high: {
color: 'nonSemantic-white-content-primary',
backgroundColor: 'nonSemantic-violet-background-strong',
color: '$color-nonSemantic-white-content-primary',
backgroundColor: '$color-nonSemantic-violet-background-strong',
},
low: {
color: 'nonSemantic-violet-content-primary',
backgroundColor: 'nonSemantic-violet-background-muted',
color: '$color-nonSemantic-violet-content-primary',
backgroundColor: '$color-nonSemantic-violet-background-muted',
},
},
},
cyan: {
emphasis: {
high: {
color: 'nonSemantic-white-content-primary',
backgroundColor: 'nonSemantic-cyan-background-strong',
color: '$color-nonSemantic-white-content-primary',
backgroundColor: '$color-nonSemantic-cyan-background-strong',
},
low: {
color: 'nonSemantic-cyan-content-primary',
backgroundColor: 'nonSemantic-cyan-background-muted',
color: '$color-nonSemantic-cyan-content-primary',
backgroundColor: '$color-nonSemantic-cyan-background-muted',
},
},
},
teal: {
emphasis: {
high: {
color: 'nonSemantic-white-content-primary',
backgroundColor: 'nonSemantic-teal-background-strong',
color: '$color-nonSemantic-white-content-primary',
backgroundColor: '$color-nonSemantic-teal-background-strong',
},
low: {
color: 'nonSemantic-teal-content-primary',
backgroundColor: 'nonSemantic-teal-background-muted',
color: '$color-nonSemantic-teal-content-primary',
backgroundColor: '$color-nonSemantic-teal-background-muted',
},
},
},
aquamarine: {
emphasis: {
high: {
color: 'nonSemantic-white-content-primary',
backgroundColor: 'nonSemantic-aquamarine-background-strong',
color: '$color-nonSemantic-white-content-primary',
backgroundColor: '$color-nonSemantic-aquamarine-background-strong',
},
low: {
color: 'nonSemantic-aquamarine-content-primary',
backgroundColor: 'nonSemantic-aquamarine-background-muted',
color: '$color-nonSemantic-aquamarine-content-primary',
backgroundColor: '$color-nonSemantic-aquamarine-background-muted',
},
},
},
emerald: {
emphasis: {
high: {
color: 'nonSemantic-white-content-primary',
backgroundColor: 'nonSemantic-emerald-background-strong',
color: '$color-nonSemantic-white-content-primary',
backgroundColor: '$color-nonSemantic-emerald-background-strong',
},
low: {
color: 'nonSemantic-emerald-content-primary',
backgroundColor: 'nonSemantic-emerald-background-muted',
color: '$color-nonSemantic-emerald-content-primary',
backgroundColor: '$color-nonSemantic-emerald-background-muted',
},
},
},
Expand Down
Loading

0 comments on commit 69d596b

Please sign in to comment.