@sumup-oss/design-tokens 8.0.0-next.0 → 8.0.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/README.md +52 -1
  2. package/dark.css +52 -20
  3. package/dist/cjs/scripts/build.d.ts +14 -12
  4. package/dist/cjs/scripts/build.js +123 -117
  5. package/dist/cjs/themes/fonts.d.ts +48 -0
  6. package/dist/cjs/themes/fonts.js +136 -0
  7. package/dist/cjs/themes/legacy/light.js +1 -1
  8. package/dist/cjs/themes/schema.d.ts +372 -0
  9. package/dist/cjs/themes/schema.js +202 -24
  10. package/dist/cjs/themes/shared.d.ts +145 -17
  11. package/dist/cjs/themes/shared.js +183 -21
  12. package/dist/cjs/types/index.d.ts +15 -0
  13. package/dist/es/scripts/build.d.ts +14 -12
  14. package/dist/es/scripts/build.js +121 -115
  15. package/dist/es/themes/fonts.d.ts +48 -0
  16. package/dist/es/themes/fonts.js +133 -0
  17. package/dist/es/themes/legacy/light.js +1 -1
  18. package/dist/es/themes/schema.d.ts +372 -0
  19. package/dist/es/themes/schema.js +202 -24
  20. package/dist/es/themes/shared.d.ts +145 -17
  21. package/dist/es/themes/shared.js +183 -21
  22. package/dist/es/types/index.d.ts +15 -0
  23. package/dynamic.css +52 -20
  24. package/fonts.css +116 -0
  25. package/light.css +52 -20
  26. package/package.json +3 -3
package/README.md CHANGED
@@ -22,10 +22,11 @@ yarn add @sumup-oss/design-tokens
22
22
 
23
23
  ## Usage
24
24
 
25
- The design tokens are exported as [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). Choose a [color scheme](#color-schemes), then import the corresponding CSS file globally in your application, such as in Next.js' `app/layout.tsx` file:
25
+ The design tokens are exported as [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). Choose a [font loading strategy](#fonts) and a [color scheme](#color-schemes), then import the corresponding CSS file globally in your application, such as in Next.js' `app/layout.tsx` file:
26
26
 
27
27
  ```tsx
28
28
  // app/layout.tsx
29
+ import '@sumup-oss/design-tokens/fonts.css';
29
30
  import '@sumup-oss/design-tokens/light.css';
30
31
 
31
32
  function App({ Component, pageProps }) {
@@ -37,6 +38,56 @@ The application code must be processed by a bundler that can handle CSS files. [
37
38
 
38
39
  Refer to the [theme documentation](https://circuit.sumup.com/?path=/docs/features-theme--docs) for a complete reference of the available tokens.
39
40
 
41
+ ### Fonts
42
+
43
+ #### Default
44
+
45
+ Import the stylesheet that contains the font face declarations globally in your application, such as in a global layout file:
46
+
47
+ ```ts
48
+ import '@sumup-oss/design-tokens/fonts.css';
49
+ ```
50
+
51
+ To speed up the loading of the fonts, add preload links to the global `<head>` element of your application. Choose which subsets to preload based on the languages your app supports. The available subsets are `latin`, `latin-ext`, `cyrillic`, `cyrillic-ext`, `greek`, `greek-ext`, and `vietnamese`.
52
+
53
+ ```html
54
+ <link
55
+ rel="preload"
56
+ href="https://static.sumup.com/fonts/Inter/Inter-normal-latin.woff2"
57
+ as="font"
58
+ type="font/woff2"
59
+ crossorigin
60
+ />
61
+ ```
62
+
63
+ #### Next.js
64
+
65
+ If you're using Next.js 13+, use the built-in [font optimization](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) feature with this recommended configuration instead:
66
+
67
+ ```tsx
68
+ // app/layout.tsx
69
+ import { Inter } from 'next/font/google';
70
+
71
+ const inter = Inter({
72
+ // Choose which subsets to preload based on the languages your app supports
73
+ subsets: ['latin'],
74
+ // Note that Next.js <14.2.6 contains outdated Google Fonts data which prevents
75
+ // usage of the `ital` axis (see https://github.com/vercel/next.js/issues/68395)
76
+ axes: ['ital'],
77
+ variable: '--cui-font-stack-default',
78
+ display: 'swap',
79
+ preload: true,
80
+ });
81
+
82
+ export default function RootLayout({ children }) {
83
+ return (
84
+ <html lang="en">
85
+ <body className={inter.variable}>{children}</body>
86
+ </html>
87
+ );
88
+ }
89
+ ```
90
+
40
91
  ### Color schemes
41
92
 
42
93
  #### Single color scheme
package/dark.css CHANGED
@@ -145,10 +145,12 @@
145
145
  --cui-border-radius-pill: 999999px;
146
146
  --cui-border-width-kilo: 1px;
147
147
  --cui-border-width-mega: 2px;
148
- --cui-font-stack-default: aktiv-grotesk, Helvetica, Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
148
+ --cui-font-stack-default: "Inter", "Inter-Fallback", Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
149
149
  --cui-font-stack-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
150
- --cui-font-weight-regular: 400;
151
- --cui-font-weight-bold: 700;
150
+ --cui-font-weight-regular: 375;
151
+ --cui-font-weight-semibold: 550;
152
+ --cui-font-weight-bold: 650;
153
+ --cui-letter-spacing: -.01375rem;
152
154
  --cui-icon-sizes-kilo: 16px;
153
155
  --cui-icon-sizes-mega: 24px;
154
156
  --cui-icon-sizes-giga: 32px;
@@ -164,30 +166,60 @@
164
166
  --cui-spacings-zetta: 56px;
165
167
  --cui-transitions-default: .12s ease-in-out;
166
168
  --cui-transitions-slow: .3s ease-in-out;
169
+ --cui-display-l-font-size: 4rem;
170
+ --cui-display-l-line-height: 4.5rem;
171
+ --cui-display-m-font-size: 3rem;
172
+ --cui-display-m-line-height: 3.5rem;
173
+ --cui-display-s-font-size: 2.5rem;
174
+ --cui-display-s-line-height: 2.875rem;
175
+ --cui-headline-l-font-size: 2rem;
176
+ --cui-headline-l-line-height: 2.25rem;
177
+ --cui-headline-m-font-size: 1.375rem;
178
+ --cui-headline-m-line-height: 1.625rem;
179
+ --cui-headline-s-font-size: 1.125rem;
180
+ --cui-headline-s-line-height: 1.375rem;
181
+ --cui-body-l-font-size: 1.25rem;
182
+ --cui-body-l-line-height: 1.5rem;
183
+ --cui-body-m-font-size: 1rem;
184
+ --cui-body-m-line-height: 1.375rem;
185
+ --cui-body-s-font-size: .875rem;
186
+ --cui-body-s-line-height: 1.25rem;
187
+ --cui-compact-l-font-size: 1.125rem;
188
+ --cui-compact-l-line-height: 1.5rem;
189
+ --cui-compact-m-font-size: .9375rem;
190
+ --cui-compact-m-line-height: 1.0625rem;
191
+ --cui-compact-s-font-size: .8125rem;
192
+ --cui-compact-s-line-height: .9375rem;
193
+ --cui-numeral-l-font-size: 3rem;
194
+ --cui-numeral-l-line-height: 3.375rem;
195
+ --cui-numeral-m-font-size: 1.5rem;
196
+ --cui-numeral-m-line-height: 1.75rem;
197
+ --cui-numeral-s-font-size: 1rem;
198
+ --cui-numeral-s-line-height: 1.375rem;
167
199
  --cui-typography-headline-one-font-size: 2rem;
168
200
  --cui-typography-headline-one-line-height: 2.25rem;
169
- --cui-typography-headline-two-font-size: 1.5rem;
170
- --cui-typography-headline-two-line-height: 1.75rem;
171
- --cui-typography-headline-three-font-size: 1.25rem;
172
- --cui-typography-headline-three-line-height: 1.5rem;
201
+ --cui-typography-headline-two-font-size: 1.375rem;
202
+ --cui-typography-headline-two-line-height: 1.625rem;
203
+ --cui-typography-headline-three-font-size: 1.375rem;
204
+ --cui-typography-headline-three-line-height: 1.625rem;
173
205
  --cui-typography-headline-four-font-size: 1.125rem;
174
- --cui-typography-headline-four-line-height: 1.5rem;
175
- --cui-typography-title-one-font-size: 7.5rem;
176
- --cui-typography-title-one-line-height: 7.5rem;
177
- --cui-typography-title-two-font-size: 6rem;
178
- --cui-typography-title-two-line-height: 6rem;
179
- --cui-typography-title-three-font-size: 4rem;
180
- --cui-typography-title-three-line-height: 4rem;
181
- --cui-typography-title-four-font-size: 3.5rem;
182
- --cui-typography-title-four-line-height: 3.5rem;
183
- --cui-typography-sub-headline-font-size: .875rem;
184
- --cui-typography-sub-headline-line-height: 1.25rem;
206
+ --cui-typography-headline-four-line-height: 1.375rem;
207
+ --cui-typography-title-one-font-size: 4rem;
208
+ --cui-typography-title-one-line-height: 4.5rem;
209
+ --cui-typography-title-two-font-size: 3rem;
210
+ --cui-typography-title-two-line-height: 3.5rem;
211
+ --cui-typography-title-three-font-size: 3rem;
212
+ --cui-typography-title-three-line-height: 3.5rem;
213
+ --cui-typography-title-four-font-size: 2.5rem;
214
+ --cui-typography-title-four-line-height: 2.875rem;
215
+ --cui-typography-sub-headline-font-size: 1.125rem;
216
+ --cui-typography-sub-headline-line-height: 1.375rem;
185
217
  --cui-typography-body-one-font-size: 1rem;
186
- --cui-typography-body-one-line-height: 1.5rem;
218
+ --cui-typography-body-one-line-height: 1.375rem;
187
219
  --cui-typography-body-two-font-size: .875rem;
188
220
  --cui-typography-body-two-line-height: 1.25rem;
189
221
  --cui-typography-body-large-font-size: 1.25rem;
190
- --cui-typography-body-large-line-height: 1.75rem;
222
+ --cui-typography-body-large-line-height: 1.5rem;
191
223
  --cui-z-index-default: 0;
192
224
  --cui-z-index-absolute: 1;
193
225
  --cui-z-index-input: 20;
package/dist/cjs/scripts/build.d.ts CHANGED
@@ -13,24 +13,26 @@
13
13
  * See the License for the specific language governing permissions and
14
14
  * limitations under the License.
15
15
  */
16
- import type { ColorScheme, Token } from '../types/index.js';
17
- type StyleGroup = {
16
+ import type { ColorScheme, FontFace, Token } from '../types/index.js';
17
+ export type TokenConfig = {
18
+ type: 'tokens';
18
19
  selectors: string[];
19
- colorScheme: ColorScheme;
20
20
  tokens: Token[];
21
+ colorScheme: ColorScheme;
21
22
  };
22
- type Theme = {
23
- name: string;
24
- groups: StyleGroup[];
23
+ export type FontFaceConfig = {
24
+ type: 'font-faces';
25
+ fontFaces: FontFace[];
25
26
  };
26
27
  /**
27
- * Validates that the theme includes all expected tokens
28
- * and that the token values match the expected type.
28
+ * Validates that the token values match the expected type.
29
29
  */
30
- export declare function validateTheme(theme: Theme): void;
31
- export declare function createStyles(group: StyleGroup): string;
30
+ export declare function validateTokens(tokens: Token[]): void;
32
31
  /**
33
32
  * Generates CSS custom properties from the tokens
34
33
  */
35
- export declare function createCSSCustomProperties(tokens: Token[]): string;
36
- export {};
34
+ export declare function createCSSCustomProperties(config: TokenConfig): string;
35
+ /**
36
+ * Generates font face declarations from the font faces
37
+ */
38
+ export declare function createFontFaceDeclarations(config: FontFaceConfig): string;
package/dist/cjs/scripts/build.js CHANGED
@@ -18,9 +18,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
18
18
  return (mod && mod.__esModule) ? mod : { "default": mod };
19
19
  };
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
- exports.validateTheme = validateTheme;
22
- exports.createStyles = createStyles;
21
+ exports.validateTokens = validateTokens;
23
22
  exports.createCSSCustomProperties = createCSSCustomProperties;
23
+ exports.createFontFaceDeclarations = createFontFaceDeclarations;
24
24
  const node_fs_1 = __importDefault(require("node:fs"));
25
25
  const node_path_1 = __importDefault(require("node:path"));
26
26
  const browserslist_1 = __importDefault(require("browserslist"));
@@ -29,80 +29,94 @@ const schema_js_1 = require("../themes/schema.js");
29
29
  const shared_js_1 = require("../themes/shared.js");
30
30
  const light_js_1 = require("../themes/light.js");
31
31
  const dark_js_1 = require("../themes/dark.js");
32
+ const fonts_js_1 = require("../themes/fonts.js");
32
33
  function main() {
33
- const themes = [
34
- {
35
- name: 'light',
36
- groups: [
37
- {
38
- tokens: [...light_js_1.light, ...shared_js_1.shared],
39
- selectors: [':root'],
40
- colorScheme: 'light',
41
- },
42
- ],
43
- },
44
- {
45
- name: 'dark',
46
- groups: [
47
- {
48
- tokens: [...dark_js_1.dark, ...shared_js_1.shared],
49
- selectors: [':root'],
50
- colorScheme: 'dark',
51
- },
52
- ],
53
- },
54
- {
55
- name: 'light-scoped',
56
- groups: [
57
- {
58
- tokens: light_js_1.light,
59
- selectors: ['[data-color-scheme="light"]'],
60
- colorScheme: 'light',
61
- },
62
- ],
63
- },
64
- {
65
- name: 'dark-scoped',
66
- groups: [
67
- {
68
- tokens: dark_js_1.dark,
69
- selectors: ['[data-color-scheme="dark"]'],
70
- colorScheme: 'dark',
71
- },
72
- ],
73
- },
74
- {
75
- name: 'dynamic',
76
- groups: [
77
- {
78
- tokens: [...light_js_1.light, ...shared_js_1.shared],
79
- selectors: [':root'],
80
- colorScheme: 'light',
81
- },
82
- {
83
- tokens: dark_js_1.dark,
84
- selectors: ['@media (prefers-color-scheme: dark)', ':root'],
85
- colorScheme: 'dark',
86
- },
87
- {
88
- tokens: light_js_1.light,
89
- selectors: ['[data-color-scheme="light"]'],
90
- colorScheme: 'light',
91
- },
92
- {
93
- tokens: dark_js_1.dark,
94
- selectors: ['[data-color-scheme="dark"]'],
95
- colorScheme: 'dark',
96
- },
97
- ],
98
- },
99
- ];
34
+ const files = {
35
+ 'light': [
36
+ {
37
+ type: 'tokens',
38
+ tokens: [...light_js_1.light, ...shared_js_1.shared],
39
+ selectors: [':root'],
40
+ colorScheme: 'light',
41
+ },
42
+ ],
43
+ 'dark': [
44
+ {
45
+ type: 'tokens',
46
+ tokens: [...dark_js_1.dark, ...shared_js_1.shared],
47
+ selectors: [':root'],
48
+ colorScheme: 'dark',
49
+ },
50
+ ],
51
+ 'light-scoped': [
52
+ {
53
+ type: 'tokens',
54
+ tokens: light_js_1.light,
55
+ selectors: ['[data-color-scheme="light"]'],
56
+ colorScheme: 'light',
57
+ },
58
+ ],
59
+ 'dark-scoped': [
60
+ {
61
+ type: 'tokens',
62
+ tokens: dark_js_1.dark,
63
+ selectors: ['[data-color-scheme="dark"]'],
64
+ colorScheme: 'dark',
65
+ },
66
+ ],
67
+ 'dynamic': [
68
+ {
69
+ type: 'tokens',
70
+ tokens: [...light_js_1.light, ...shared_js_1.shared],
71
+ selectors: [':root'],
72
+ colorScheme: 'light',
73
+ },
74
+ {
75
+ type: 'tokens',
76
+ tokens: dark_js_1.dark,
77
+ selectors: ['@media (prefers-color-scheme: dark)', ':root'],
78
+ colorScheme: 'dark',
79
+ },
80
+ {
81
+ type: 'tokens',
82
+ tokens: light_js_1.light,
83
+ selectors: ['[data-color-scheme="light"]'],
84
+ colorScheme: 'light',
85
+ },
86
+ {
87
+ type: 'tokens',
88
+ tokens: dark_js_1.dark,
89
+ selectors: ['[data-color-scheme="dark"]'],
90
+ colorScheme: 'dark',
91
+ },
92
+ ],
93
+ 'fonts': [
94
+ {
95
+ type: 'font-faces',
96
+ fontFaces: fonts_js_1.inter,
97
+ },
98
+ ],
99
+ };
100
100
  const targets = (0, lightningcss_1.browserslistToTargets)((0, browserslist_1.default)());
101
- themes.forEach((theme) => {
102
- validateTheme(theme);
103
- const filename = `${theme.name}.css`;
101
+ Object.entries(files).forEach(([name, configs]) => {
102
+ const filename = `${name}.css`;
104
103
  const filepath = node_path_1.default.join(__dirname, '../', filename);
105
- const styles = theme.groups.map(createStyles).join('\n');
104
+ const styles = configs
105
+ .map((config) => {
106
+ switch (config.type) {
107
+ case 'tokens': {
108
+ validateTokens(config.tokens);
109
+ return createCSSCustomProperties(config);
110
+ }
111
+ case 'font-faces': {
112
+ return createFontFaceDeclarations(config);
113
+ }
114
+ default: {
115
+ throw new Error('Unsupported config type');
116
+ }
117
+ }
118
+ })
119
+ .join('\n');
106
120
  const { code } = (0, lightningcss_1.transform)({
107
121
  filename,
108
122
  code: Buffer.from(styles),
@@ -112,56 +126,31 @@ function main() {
112
126
  });
113
127
  }
114
128
  /**
115
- * Validates that the theme includes all expected tokens
116
- * and that the token values match the expected type.
129
+ * Validates that the token values match the expected type.
117
130
  */
118
- function validateTheme(theme) {
119
- // Validate the token types
120
- theme.groups.forEach(({ tokens }) => {
121
- tokens.forEach(({ name, type }) => {
122
- const token = schema_js_1.schema.find((t) => t.name === name);
123
- if (!token) {
124
- return;
125
- // throw new Error(`The theme is missing the required "${name}" token.`);
126
- }
127
- if (token.type !== type) {
128
- throw new Error([
129
- `The "${name}" token does not match the expected type.`,
130
- `Expected "${token.type}". Received "${type}."`,
131
- ].join(' '));
132
- }
133
- });
131
+ function validateTokens(tokens) {
132
+ tokens.forEach(({ name, type }) => {
133
+ const token = schema_js_1.schema.find((t) => t.name === name);
134
+ if (!token) {
135
+ return;
136
+ }
137
+ if (token.type !== type) {
138
+ throw new Error([
139
+ `The "${name}" token does not match the expected type.`,
140
+ `Expected "${token.type}". Received "${type}."`,
141
+ ].join(' '));
142
+ }
134
143
  });
135
- // Validate that the tokens at the root are complete
136
- const rootGroup = theme.groups.find((group) => group.selectors.length === 1 && group.selectors[0] === ':root');
137
- if (!rootGroup) {
138
- return;
139
- }
140
- if (rootGroup.tokens.length !== schema_js_1.schema.length) {
141
- schema_js_1.schema.forEach(({ name }) => {
142
- const token = rootGroup.tokens.find((t) => t.name === name);
143
- if (!token) {
144
- throw new Error(`The "${theme.name}" theme does not globally define the required "${name}" token. Add it to the ":root" selector.`);
145
- }
146
- });
147
- }
148
- }
149
- function createStyles(group) {
150
- const selectorStart = group.selectors
151
- .map((selector) => `${selector} {`)
152
- .join('');
153
- const selectorEnd = group.selectors.map(() => '}').join('');
154
- const customProperties = createCSSCustomProperties(group.tokens);
155
- return `${selectorStart}
156
- color-scheme: ${group.colorScheme};
157
- ${customProperties}
158
- ${selectorEnd}`;
159
144
  }
160
145
  /**
161
146
  * Generates CSS custom properties from the tokens
162
147
  */
163
- function createCSSCustomProperties(tokens) {
164
- return tokens
148
+ function createCSSCustomProperties(config) {
149
+ const selectorStart = config.selectors
150
+ .map((selector) => `${selector} {`)
151
+ .join('');
152
+ const selectorEnd = config.selectors.map(() => '}').join('');
153
+ const customProperties = config.tokens
165
154
  .flatMap((token) => {
166
155
  const { description, name, value } = token;
167
156
  const lines = [];
@@ -172,6 +161,23 @@ function createCSSCustomProperties(tokens) {
172
161
  return lines;
173
162
  })
174
163
  .join(' ');
164
+ return `${selectorStart}
165
+ color-scheme: ${config.colorScheme};
166
+ ${customProperties}
167
+ ${selectorEnd}`;
168
+ }
169
+ /**
170
+ * Generates font face declarations from the font faces
171
+ */
172
+ function createFontFaceDeclarations(config) {
173
+ return config.fontFaces
174
+ .map((fontFace) => {
175
+ const properties = Object.entries(fontFace)
176
+ .map(([name, value]) => `${name}: ${value};`)
177
+ .join('');
178
+ return `@font-face { ${properties} }`;
179
+ })
180
+ .join(' ');
175
181
  }
176
182
  try {
177
183
  main();
package/dist/cjs/themes/fonts.d.ts ADDED
@@ -0,0 +1,48 @@
1
+ /**
2
+ * Copyright 2024, SumUp Ltd.
3
+ * Licensed under the Apache License, Version 2.0 (the "License");
4
+ * you may not use this file except in compliance with the License.
5
+ * You may obtain a copy of the License at
6
+ *
7
+ * http://www.apache.org/licenses/LICENSE-2.0
8
+ *
9
+ * Unless required by applicable law or agreed to in writing, software
10
+ * distributed under the License is distributed on an "AS IS" BASIS,
11
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
+ * See the License for the specific language governing permissions and
13
+ * limitations under the License.
14
+ */
15
+ export declare const inter: ({
16
+ 'font-family': string;
17
+ 'font-style': "italic";
18
+ 'font-weight': "100 900";
19
+ 'font-display': "swap";
20
+ src: string;
21
+ 'unicode-range': string;
22
+ 'ascent-override'?: undefined;
23
+ 'descent-override'?: undefined;
24
+ 'line-gap-override'?: undefined;
25
+ 'size-adjust'?: undefined;
26
+ } | {
27
+ 'font-family': string;
28
+ 'font-style': "normal";
29
+ 'font-weight': "100 900";
30
+ 'font-display': "swap";
31
+ src: string;
32
+ 'unicode-range': string;
33
+ 'ascent-override'?: undefined;
34
+ 'descent-override'?: undefined;
35
+ 'line-gap-override'?: undefined;
36
+ 'size-adjust'?: undefined;
37
+ } | {
38
+ 'font-family': string;
39
+ src: "local(\"Arial\")";
40
+ 'ascent-override': "90.49%";
41
+ 'descent-override': "22.56%";
42
+ 'line-gap-override': "0%";
43
+ 'size-adjust': "107.06%";
44
+ 'font-style'?: undefined;
45
+ 'font-weight'?: undefined;
46
+ 'font-display'?: undefined;
47
+ 'unicode-range'?: undefined;
48
+ })[];
package/dist/cjs/themes/fonts.js ADDED
@@ -0,0 +1,136 @@
1
+ "use strict";
2
+ /**
3
+ * Copyright 2024, SumUp Ltd.
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ * http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ */
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ exports.inter = void 0;
18
+ exports.inter = [
19
+ /* cyrillic-ext */
20
+ {
21
+ 'font-family': 'Inter',
22
+ 'font-style': 'italic',
23
+ 'font-weight': '100 900',
24
+ 'font-display': 'swap',
25
+ 'src': 'url("https://static.sumup.com/fonts/Inter/Inter-italic-cyrillic-ext.woff2") format("woff2")',
26
+ 'unicode-range': 'U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F',
27
+ },
28
+ /* cyrillic */
29
+ {
30
+ 'font-family': 'Inter',
31
+ 'font-style': 'italic',
32
+ 'font-weight': '100 900',
33
+ 'font-display': 'swap',
34
+ 'src': 'url("https://static.sumup.com/fonts/Inter/Inter-italic-cyrillic.woff2") format("woff2")',
35
+ 'unicode-range': 'U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116',
36
+ },
37
+ /* greek-ext */
38
+ {
39
+ 'font-family': 'Inter',
40
+ 'font-style': 'italic',
41
+ 'font-weight': '100 900',
42
+ 'font-display': 'swap',
43
+ 'src': 'url("https://static.sumup.com/fonts/Inter/Inter-italic-greek-ext.woff2") format("woff2")',
44
+ 'unicode-range': 'U+1F00-1FFF',
45
+ },
46
+ /* greek */
47
+ {
48
+ 'font-family': 'Inter',
49
+ 'font-style': 'italic',
50
+ 'font-weight': '100 900',
51
+ 'font-display': 'swap',
52
+ 'src': 'url("https://static.sumup.com/fonts/Inter/Inter-italic-greek.woff2") format("woff2")',
53
+ 'unicode-range': 'U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF',
54
+ },
55
+ /* latin-ext */
56
+ {
57
+ 'font-family': 'Inter',
58
+ 'font-style': 'italic',
59
+ 'font-weight': '100 900',
60
+ 'font-display': 'swap',
61
+ 'src': 'url("https://static.sumup.com/fonts/Inter/Inter-italic-latin-ext.woff2") format("woff2")',
62
+ 'unicode-range': 'U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF',
63
+ },
64
+ /* latin */
65
+ {
66
+ 'font-family': 'Inter',
67
+ 'font-style': 'italic',
68
+ 'font-weight': '100 900',
69
+ 'font-display': 'swap',
70
+ 'src': 'url("https://static.sumup.com/fonts/Inter/Inter-italic-latin.woff2") format("woff2")',
71
+ 'unicode-range': 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
72
+ },
73
+ /* cyrillic-ext */
74
+ {
75
+ 'font-family': 'Inter',
76
+ 'font-style': 'normal',
77
+ 'font-weight': '100 900',
78
+ 'font-display': 'swap',
79
+ 'src': 'url("https://static.sumup.com/fonts/Inter/Inter-normal-cyrillic-ext.woff2") format("woff2")',
80
+ 'unicode-range': 'U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F',
81
+ },
82
+ /* cyrillic */
83
+ {
84
+ 'font-family': 'Inter',
85
+ 'font-style': 'normal',
86
+ 'font-weight': '100 900',
87
+ 'font-display': 'swap',
88
+ 'src': 'url("https://static.sumup.com/fonts/Inter/Inter-normal-cyrillic.woff2") format("woff2")',
89
+ 'unicode-range': 'U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116',
90
+ },
91
+ /* greek-ext */
92
+ {
93
+ 'font-family': 'Inter',
94
+ 'font-style': 'normal',
95
+ 'font-weight': '100 900',
96
+ 'font-display': 'swap',
97
+ 'src': 'url("https://static.sumup.com/fonts/Inter/Inter-normal-greek-ext.woff2") format("woff2")',
98
+ 'unicode-range': 'U+1F00-1FFF',
99
+ },
100
+ /* greek */
101
+ {
102
+ 'font-family': 'Inter',
103
+ 'font-style': 'normal',
104
+ 'font-weight': '100 900',
105
+ 'font-display': 'swap',
106
+ 'src': 'url("https://static.sumup.com/fonts/Inter/Inter-normal-greek.woff2") format("woff2")',
107
+ 'unicode-range': 'U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF',
108
+ },
109
+ /* latin-ext */
110
+ {
111
+ 'font-family': 'Inter',
112
+ 'font-style': 'normal',
113
+ 'font-weight': '100 900',
114
+ 'font-display': 'swap',
115
+ 'src': 'url("https://static.sumup.com/fonts/Inter/Inter-normal-latin-ext.woff2") format("woff2")',
116
+ 'unicode-range': 'U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF',
117
+ },
118
+ /* latin */
119
+ {
120
+ 'font-family': 'Inter',
121
+ 'font-style': 'normal',
122
+ 'font-weight': '100 900',
123
+ 'font-display': 'swap',
124
+ 'src': 'url("https://static.sumup.com/fonts/Inter/Inter-normal-latin.woff2") format("woff2")',
125
+ 'unicode-range': 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
126
+ },
127
+ /* fallback */
128
+ {
129
+ 'font-family': 'Inter-Fallback',
130
+ 'src': 'local("Arial")',
131
+ 'ascent-override': '90.49%',
132
+ 'descent-override': '22.56%',
133
+ 'line-gap-override': '0%',
134
+ 'size-adjust': '107.06%',
135
+ },
136
+ ];