Skip to content

Commit 012f73a

Browse files
Mukesh-FNMukesh-FN
committed
feat: updated typography of wave design system
1 parent fedf564 commit 012f73a

File tree

7 files changed

+105
-9
lines changed

7 files changed

+105
-9
lines changed

‎package-lock.json‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,7 @@
161161
},
162162
"dependencies": {
163163
"@datepicker-react/hooks": "^2.3.1",
164+
"@fontsource-variable/roboto-flex": "^5.2.6",
164165
"@popperjs/core": "^2.11.5",
165166
"@styled-system/theme-get": "^5.1.2",
166167
"@types/react-select": "^4.0.18",

‎src/components/FilePicker/__snapshots__/FilePicker.spec.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ exports[`when a file gets submitted component removes the initial button 1`] = `
6666
.c7 {
6767
color: inherit;
6868
font-size: 1rem;
69-
font-family: "Roboto Flex","Open Sans",sans-serif;
69+
font-family: "Roboto Flex Variable","Open Sans",sans-serif;
7070
line-height: 1.4;
7171
margin: 0;
7272
font-size: 0.875rem;
@@ -75,7 +75,7 @@ exports[`when a file gets submitted component removes the initial button 1`] = `
7575
.c8 {
7676
color: var(--wave-s-color-foreground-neutral-emphasized);
7777
font-size: 1rem;
78-
font-family: "Roboto Flex","Open Sans",sans-serif;
78+
font-family: "Roboto Flex Variable","Open Sans",sans-serif;
7979
line-height: 1.4;
8080
margin: 0;
8181
font-size: 0.875rem;

‎src/components/TabBar/__snapshots__/Link.spec.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ exports[`TabBar.Link has a bright color if selected 1`] = `
1212
cursor: pointer;
1313
font-size: 0.875rem;
1414
font-weight: 600;
15-
font-family: "Roboto Flex","Open Sans",sans-serif;
15+
font-family: "Roboto Flex Variable","Open Sans",sans-serif;
1616
margin-right: 1.5rem;
1717
-webkit-text-decoration: none;
1818
text-decoration: none;
@@ -53,7 +53,7 @@ exports[`TabBar.Link renders with default props 1`] = `
5353
cursor: pointer;
5454
font-size: 0.875rem;
5555
font-weight: 600;
56-
font-family: "Roboto Flex","Open Sans",sans-serif;
56+
font-family: "Roboto Flex Variable","Open Sans",sans-serif;
5757
margin-right: 1.5rem;
5858
-webkit-text-decoration: none;
5959
text-decoration: none;

‎src/essentials/Colors/globalStyles.ts‎

Lines changed: 88 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ import {
88
} from '../../utils/cssVariables';
99
import { SemanticColorsSchema } from './types';
1010

11+
if (process.env.NODE_ENV !== 'test') {
12+
import('../fonts/fonts');
13+
}
14+
1115
export const createThemeGlobalStyle = (
1216
bareVariables: TokenObject,
1317
lightScheme: SemanticColorsSchema,
@@ -23,7 +27,7 @@ export const createThemeGlobalStyle = (
2327
color-scheme: dark;
2428
${generateSemanticTierCssVariables(darkScheme)}
2529
}
26-
30+
2731
.light-scheme {
2832
color-scheme: light;
2933
${generateSemanticTierCssVariables(lightScheme)}
@@ -35,12 +39,92 @@ export const createThemeGlobalStyle = (
3539
${generateSemanticTierCssVariables(darkScheme)}
3640
}
3741
}
38-
42+
3943
body, .wave {
4044
color: ${getSemanticValue('foreground-primary')};
41-
background-color: ${getSemanticValue('background-page-default')}
45+
background-color: ${getSemanticValue('background-page-default')};
46+
font-family: "Roboto Flex Variable", system-ui, sans-serif;
47+
font-style: normal;
48+
font-variation-settings:
49+
"GRAD" 0,
50+
"XOPQ" 100,
51+
"XTRA" 506,
52+
"YOPQ" 85,
53+
"YTAS" 730,
54+
"YTDE" -203,
55+
"YTFI" 738,
56+
"YTLC" 550,
57+
"YTUC" 712;
58+
59+
/* roboto-flex-latin-wght-normal */
60+
@font-face {
61+
font-family: "Roboto Flex Variable";
62+
font-style: oblique 0deg 10deg;
63+
font-display: swap;
64+
font-weight: 100 1000;
65+
font-stretch: 25% 151%;
66+
src: url(@fontsource-variable/roboto-flex/files/roboto-flex-latin-full-normal.woff2)
67+
format("woff2-variations");
68+
unicode-range:
69+
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
70+
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
71+
U+2215, U+FEFF, U+FFFD;
72+
}
73+
74+
/* roboto-flex-cyrillic-wght-normal */
75+
@font-face {
76+
font-family: "Roboto Flex Variable";
77+
font-style: oblique 0deg 10deg;
78+
font-display: swap;
79+
font-weight: 100 1000;
80+
font-stretch: 25% 151%;
81+
src: url(@fontsource-variable/roboto-flex/files/roboto-flex-cyrillic-full-normal.woff2)
82+
format("woff2-variations");
83+
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
84+
}
85+
86+
/* roboto-flex-cyrillic-ext-wght-normal */
87+
@font-face {
88+
font-family: "Roboto Flex Variable";
89+
font-style: oblique 0deg 10deg;
90+
font-display: swap;
91+
font-weight: 100 1000;
92+
font-stretch: 25% 151%;
93+
src: url(@fontsource-variable/roboto-flex/files/roboto-flex-cyrillic-ext-full-normal.woff2)
94+
format("woff2-variations");
95+
unicode-range:
96+
U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
97+
}
98+
99+
/* roboto-flex-greek-wght-normal */
100+
@font-face {
101+
font-family: "Roboto Flex Variable";
102+
font-style: oblique 0deg 10deg;
103+
font-display: swap;
104+
font-weight: 100 1000;
105+
font-stretch: 25% 151%;
106+
src: url(@fontsource-variable/roboto-flex/files/roboto-flex-greek-full-normal.woff2)
107+
format("woff2-variations");
108+
unicode-range:
109+
U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
110+
}
111+
112+
/* roboto-flex-latin-ext-wght-normal */
113+
@font-face {
114+
font-family: "Roboto Flex Variable";
115+
font-style: oblique 0deg 10deg;
116+
font-display: swap;
117+
font-weight: 100 1000;
118+
font-stretch: 25% 151%;
119+
src: url(@fontsource-variable/roboto-flex/files/roboto-flex-latin-ext-full-normal.woff2)
120+
format("woff2-variations");
121+
unicode-range:
122+
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
123+
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
124+
U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
125+
}
42126
}
43-
127+
44128
svg {
45129
fill: currentColor;
46130
}

‎src/essentials/fonts/fonts.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import '@fontsource-variable/roboto-flex';

‎src/essentials/theme.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const theme: DefaultTheme = {
1111
bold: 700
1212
},
1313
fonts: {
14-
normal: fontStack(['Roboto Flex', 'Open Sans', 'sans-serif']),
14+
normal: fontStack(['Roboto Flex Variable', 'Open Sans', 'sans-serif']),
1515
monospace: fontStack(['Hack', 'monospace'])
1616
},
1717
mediaQueries: MediaQueries,

0 commit comments

Comments
 (0)