Skip to content

Commit 542b9c1

Browse files
georgewrmarshallgeorgewrmarshall
committed
chore: updating font family from euclid to centrano1 in extension
1 parent 69c802f commit 542b9c1

File tree

13 files changed

+16
-258
lines changed

13 files changed

+16
-258
lines changed

‎.storybook/metamask-storybook-theme.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@
22
export const metamaskStorybookTheme = {
33
brandTitle: 'MetaMask Storybook',
44
// Typography
5-
fontBase: 'Euclid Circular B, Helvetica, Arial, sans-serif',
5+
fontBase: 'var(--font-family-sans)',
66
};

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,7 @@
266266
"@metamask/browser-passworder": "^4.3.0",
267267
"@metamask/contract-metadata": "^2.5.0",
268268
"@metamask/controller-utils": "^11.4.0",
269-
"@metamask/design-tokens": "^5.1.0",
269+
"@metamask/design-tokens": "^6.0.1",
270270
"@metamask/ens-controller": "^15.0.2",
271271
"@metamask/ens-resolver-snap": "^0.1.2",
272272
"@metamask/eth-json-rpc-filters": "^9.0.0",

‎ui/components/component-library/text/__snapshots__/text.test.tsx.snap‎

Lines changed: 0 additions & 71 deletions
This file was deleted.

‎ui/components/component-library/text/text.scss‎

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,8 @@ $text-variants: (
77
body: ("xs", "xs-medium", "sm", "sm-medium", "sm-bold", "md", "md-medium", "md-bold", "lg-medium"),
88
);
99

10-
// Brand evolution font families
11-
$brand-evolution-font-families: (
12-
'display': 'MM Sans',
13-
'heading': 'MM Sans',
14-
'body': 'CentraNo1',
15-
);
16-
1710
// Variable output mixin
1811
// screen size, type, size
19-
2012
@mixin textVariables($type, $size) {
2113
font-family: var(--typography-s-#{$type}-#{$size}-font-family);
2214
font-weight: var(--typography-s-#{$type}-#{$size}-font-weight);
@@ -33,17 +25,6 @@ $brand-evolution-font-families: (
3325
}
3426
}
3527

36-
// Brand evolution font mixin
37-
@mixin brand-evolution-font($type) {
38-
$font-family: map-get($brand-evolution-font-families, $type);
39-
40-
font-family: $font-family, var(--font-family-sans);
41-
42-
@if $type == 'display' or $type == 'heading' {
43-
font-weight: var(--font-weight-normal);
44-
}
45-
}
46-
4728
.mm-text {
4829
// Set default styles
4930
font-family: var(--font-family-sans);
@@ -61,10 +42,6 @@ $brand-evolution-font-families: (
6142
@each $size in $size-options {
6243
&-#{$size} {
6344
@include textVariables($type, $size);
64-
// Apply brand evolution font if the brand evolution modifier class is present
65-
&-brand-evo {
66-
@include brand-evolution-font($type);
67-
}
6845
}
6946
}
7047
}
@@ -108,8 +85,6 @@ $brand-evolution-font-families: (
10885
}
10986
}
11087

111-
112-
11388
&--ellipsis {
11489
text-overflow: ellipsis;
11590
white-space: nowrap;

‎ui/components/component-library/text/text.stories.tsx‎

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -286,29 +286,3 @@ export const Strong: StoryFn<typeof Text> = (args) => (
286286
</Text>
287287
</>
288288
);
289-
290-
export const IsBrandEvolution = (args) => (
291-
<>
292-
{Object.values(TextVariant).map((variant) => {
293-
// Wrap TextVariant.inherit in a span to show it's inherited styles
294-
if (variant === TextVariant.inherit) {
295-
return (
296-
<Text as="span" {...args}>
297-
<Text {...args} variant={variant} key={variant}>
298-
{args.children || variant}
299-
</Text>
300-
</Text>
301-
);
302-
}
303-
return (
304-
<Text {...args} variant={variant} key={variant}>
305-
{args.children || variant}
306-
</Text>
307-
);
308-
})}
309-
</>
310-
);
311-
312-
IsBrandEvolution.args = {
313-
isBrandEvolution: true,
314-
};

‎ui/components/component-library/text/text.test.tsx‎

Lines changed: 1 addition & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ describe('Text', () => {
6767
});
6868

6969
it('should render the Text with proper variant class name', () => {
70-
const { getByText, container } = render(
70+
const { getByText } = render(
7171
<>
7272
<Text variant={TextVariant.displayMd}>display-md</Text>
7373
<Text variant={TextVariant.headingLg}>heading-lg</Text>
@@ -98,88 +98,6 @@ describe('Text', () => {
9898
expect(getByText('body-sm-bold')).toHaveClass('mm-text--body-sm-bold');
9999
expect(getByText('body-xs')).toHaveClass('mm-text--body-xs');
100100
expect(getByText('body-xs-medium')).toHaveClass('mm-text--body-xs-medium');
101-
expect(container).toMatchSnapshot();
102-
});
103-
104-
// Brand Evolution Typography
105-
it('should render the Text with proper brand evolution class name', () => {
106-
const { getByText } = render(
107-
<>
108-
<Text variant={TextVariant.displayMd} isBrandEvolution>
109-
display-md
110-
</Text>
111-
<Text variant={TextVariant.headingLg} isBrandEvolution>
112-
heading-lg
113-
</Text>
114-
<Text variant={TextVariant.headingMd} isBrandEvolution>
115-
heading-md
116-
</Text>
117-
<Text variant={TextVariant.headingSm} isBrandEvolution>
118-
heading-sm
119-
</Text>
120-
<Text variant={TextVariant.bodyLgMedium} isBrandEvolution>
121-
body-lg-medium
122-
</Text>
123-
<Text variant={TextVariant.bodyMd} isBrandEvolution>
124-
body-md
125-
</Text>
126-
<Text variant={TextVariant.bodyMdMedium} isBrandEvolution>
127-
body-md-medium
128-
</Text>
129-
<Text variant={TextVariant.bodyMdBold} isBrandEvolution>
130-
body-md-bold
131-
</Text>
132-
<Text variant={TextVariant.bodySm} isBrandEvolution>
133-
body-sm
134-
</Text>
135-
<Text variant={TextVariant.bodySmMedium} isBrandEvolution>
136-
body-sm-medium
137-
</Text>
138-
<Text variant={TextVariant.bodySmBold} isBrandEvolution>
139-
body-sm-bold
140-
</Text>
141-
<Text variant={TextVariant.bodyXs} isBrandEvolution>
142-
body-xs
143-
</Text>
144-
<Text variant={TextVariant.bodyXsMedium} isBrandEvolution>
145-
body-xs-medium
146-
</Text>
147-
</>,
148-
);
149-
150-
expect(getByText('display-md')).toHaveClass(
151-
'mm-text--display-md-brand-evo',
152-
);
153-
expect(getByText('heading-lg')).toHaveClass(
154-
'mm-text--heading-lg-brand-evo',
155-
);
156-
expect(getByText('heading-md')).toHaveClass(
157-
'mm-text--heading-md-brand-evo',
158-
);
159-
expect(getByText('heading-sm')).toHaveClass(
160-
'mm-text--heading-sm-brand-evo',
161-
);
162-
expect(getByText('body-lg-medium')).toHaveClass(
163-
'mm-text--body-lg-medium-brand-evo',
164-
);
165-
expect(getByText('body-md')).toHaveClass('mm-text--body-md-brand-evo');
166-
expect(getByText('body-md-medium')).toHaveClass(
167-
'mm-text--body-md-medium-brand-evo',
168-
);
169-
expect(getByText('body-md-bold')).toHaveClass(
170-
'mm-text--body-md-bold-brand-evo',
171-
);
172-
expect(getByText('body-sm')).toHaveClass('mm-text--body-sm-brand-evo');
173-
expect(getByText('body-sm-medium')).toHaveClass(
174-
'mm-text--body-sm-medium-brand-evo',
175-
);
176-
expect(getByText('body-sm-bold')).toHaveClass(
177-
'mm-text--body-sm-bold-brand-evo',
178-
);
179-
expect(getByText('body-xs')).toHaveClass('mm-text--body-xs-brand-evo');
180-
expect(getByText('body-xs-medium')).toHaveClass(
181-
'mm-text--body-xs-medium-brand-evo',
182-
);
183101
});
184102

185103
it('should render the Text with proper font weight class name', () => {

‎ui/components/component-library/text/text.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ export const Text: TextComponent = React.forwardRef(
4242
ellipsis,
4343
className = '',
4444
children,
45-
isBrandEvolution, // Enables Brand Evolution Typography do not use unless you are working on the brand evolution
4645
...props
4746
}: TextProps<C>,
4847
ref?: PolymorphicRef<C>,
@@ -61,7 +60,6 @@ export const Text: TextComponent = React.forwardRef(
6160
[`mm-text--text-transform-${textTransform}`]: Boolean(textTransform),
6261
[`mm-text--text-align-${textAlign}`]: Boolean(textAlign),
6362
[`mm-text--overflow-wrap-${overflowWrap}`]: Boolean(overflowWrap),
64-
[`mm-text--${variant}-brand-evo`]: Boolean(isBrandEvolution),
6563
},
6664
);
6765

‎ui/components/component-library/text/text.types.ts‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -134,11 +134,6 @@ export interface TextStyleUtilityProps extends StyleUtilityProps {
134134
* Used for long strings that can be cut off...
135135
*/
136136
ellipsis?: boolean;
137-
/**
138-
* Enable Brand Evolution Typography
139-
* Do not use unless you are working on the brand evolution
140-
*/
141-
isBrandEvolution?: boolean;
142137
}
143138

144139
export type TextProps<C extends React.ElementType> =

‎ui/components/ui/text-field/text-field.component.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,9 @@ const inputLabelBase = {
1919
color: 'var(--color-text-default)',
2020
};
2121

22-
const fontFamily = [
23-
'"Euclid Circular B"',
24-
'Helvetica',
25-
'Arial',
26-
'sans-serif',
27-
].join(', ');
22+
const fontFamily = ['"CentraNo1"', 'Helvetica', 'Arial', 'sans-serif'].join(
23+
', ',
24+
);
2825

2926
const styles = {
3027
materialLabel: {

‎ui/css/design-system/_typography.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@use "sass:map";
22

3-
$font-family: 'Euclid Circular B', Helvetica, Arial, sans-serif;
3+
$font-family: var(--font-family-sans); // --font-family-sans from @metamask/design-tokens stylesheet
44

55
$typography-variants: (
66
'h1': 2.5rem,

0 commit comments

Comments
 (0)