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

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 (9) hide show
  1. package/README.md +1 -29
  2. package/dark.css +3 -3
  3. package/dist/cjs/themes/shared.d.ts +1 -1
  4. package/dist/cjs/themes/shared.js +3 -3
  5. package/dist/es/themes/shared.d.ts +1 -1
  6. package/dist/es/themes/shared.js +3 -3
  7. package/dynamic.css +3 -3
  8. package/light.css +3 -3
  9. package/package.json +6 -6
package/README.md CHANGED
@@ -40,8 +40,6 @@ Refer to the [theme documentation](https://circuit.sumup.com/?path=/docs/feature
40
40
 
41
41
  ### Fonts
42
42
 
43
- #### Default
44
-
45
43
  Import the stylesheet that contains the font face declarations globally in your application, such as in a global layout file:
46
44
 
47
45
  ```ts
@@ -60,33 +58,7 @@ To speed up the loading of the fonts, add preload links to the global `<head>` e
60
58
  />
61
59
  ```
62
60
 
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
- ```
61
+ Do not use Next.js' built-in font optimization as it doesn't support Inter's italic axis.
90
62
 
91
63
  ### Color schemes
92
64
 
package/dark.css CHANGED
@@ -148,8 +148,8 @@
148
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
150
  --cui-font-weight-regular: 375;
151
- --cui-font-weight-semibold: 550;
152
- --cui-font-weight-bold: 650;
151
+ --cui-font-weight-semibold: 560;
152
+ --cui-font-weight-bold: 630;
153
153
  --cui-letter-spacing: -.01375rem;
154
154
  --cui-icon-sizes-kilo: 16px;
155
155
  --cui-icon-sizes-mega: 24px;
@@ -174,7 +174,7 @@
174
174
  --cui-display-s-line-height: 2.875rem;
175
175
  --cui-headline-l-font-size: 2rem;
176
176
  --cui-headline-l-line-height: 2.25rem;
177
- --cui-headline-m-font-size: 1.375rem;
177
+ --cui-headline-m-font-size: 1.5rem;
178
178
  --cui-headline-m-line-height: 1.625rem;
179
179
  --cui-headline-s-font-size: 1.125rem;
180
180
  --cui-headline-s-line-height: 1.375rem;
package/dist/cjs/themes/shared.d.ts CHANGED
@@ -162,7 +162,7 @@ export declare const shared: ({
162
162
  type: "dimension";
163
163
  } | {
164
164
  name: "--cui-headline-m-font-size";
165
- value: "1.375rem";
165
+ value: "1.5rem";
166
166
  type: "dimension";
167
167
  } | {
168
168
  name: "--cui-headline-m-line-height";
package/dist/cjs/themes/shared.js CHANGED
@@ -76,12 +76,12 @@ exports.shared = [
76
76
  },
77
77
  {
78
78
  name: '--cui-font-weight-semibold',
79
- value: '550',
79
+ value: '560',
80
80
  type: 'fontWeight',
81
81
  },
82
82
  {
83
83
  name: '--cui-font-weight-bold',
84
- value: '650',
84
+ value: '630',
85
85
  type: 'fontWeight',
86
86
  },
87
87
  /* Letter spacing */
@@ -211,7 +211,7 @@ exports.shared = [
211
211
  },
212
212
  {
213
213
  name: '--cui-headline-m-font-size',
214
- value: '1.375rem',
214
+ value: '1.5rem',
215
215
  type: 'dimension',
216
216
  },
217
217
  {
package/dist/es/themes/shared.d.ts CHANGED
@@ -162,7 +162,7 @@ export declare const shared: ({
162
162
  type: "dimension";
163
163
  } | {
164
164
  name: "--cui-headline-m-font-size";
165
- value: "1.375rem";
165
+ value: "1.5rem";
166
166
  type: "dimension";
167
167
  } | {
168
168
  name: "--cui-headline-m-line-height";
package/dist/es/themes/shared.js CHANGED
@@ -73,12 +73,12 @@ export const shared = [
73
73
  },
74
74
  {
75
75
  name: '--cui-font-weight-semibold',
76
- value: '550',
76
+ value: '560',
77
77
  type: 'fontWeight',
78
78
  },
79
79
  {
80
80
  name: '--cui-font-weight-bold',
81
- value: '650',
81
+ value: '630',
82
82
  type: 'fontWeight',
83
83
  },
84
84
  /* Letter spacing */
@@ -208,7 +208,7 @@ export const shared = [
208
208
  },
209
209
  {
210
210
  name: '--cui-headline-m-font-size',
211
- value: '1.375rem',
211
+ value: '1.5rem',
212
212
  type: 'dimension',
213
213
  },
214
214
  {
package/dynamic.css CHANGED
@@ -148,8 +148,8 @@
148
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
150
  --cui-font-weight-regular: 375;
151
- --cui-font-weight-semibold: 550;
152
- --cui-font-weight-bold: 650;
151
+ --cui-font-weight-semibold: 560;
152
+ --cui-font-weight-bold: 630;
153
153
  --cui-letter-spacing: -.01375rem;
154
154
  --cui-icon-sizes-kilo: 16px;
155
155
  --cui-icon-sizes-mega: 24px;
@@ -174,7 +174,7 @@
174
174
  --cui-display-s-line-height: 2.875rem;
175
175
  --cui-headline-l-font-size: 2rem;
176
176
  --cui-headline-l-line-height: 2.25rem;
177
- --cui-headline-m-font-size: 1.375rem;
177
+ --cui-headline-m-font-size: 1.5rem;
178
178
  --cui-headline-m-line-height: 1.625rem;
179
179
  --cui-headline-s-font-size: 1.125rem;
180
180
  --cui-headline-s-line-height: 1.375rem;
package/light.css CHANGED
@@ -148,8 +148,8 @@
148
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
150
  --cui-font-weight-regular: 375;
151
- --cui-font-weight-semibold: 550;
152
- --cui-font-weight-bold: 650;
151
+ --cui-font-weight-semibold: 560;
152
+ --cui-font-weight-bold: 630;
153
153
  --cui-letter-spacing: -.01375rem;
154
154
  --cui-icon-sizes-kilo: 16px;
155
155
  --cui-icon-sizes-mega: 24px;
@@ -174,7 +174,7 @@
174
174
  --cui-display-s-line-height: 2.875rem;
175
175
  --cui-headline-l-font-size: 2rem;
176
176
  --cui-headline-l-line-height: 2.25rem;
177
- --cui-headline-m-font-size: 1.375rem;
177
+ --cui-headline-m-font-size: 1.5rem;
178
178
  --cui-headline-m-line-height: 1.625rem;
179
179
  --cui-headline-s-font-size: 1.125rem;
180
180
  --cui-headline-s-line-height: 1.375rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sumup-oss/design-tokens",
3
- "version": "8.0.0-next.2",
3
+ "version": "8.0.0",
4
4
  "description": "Visual primitives such as typography, color, and spacing that are shared across platforms.",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/es/index.js",
@@ -32,13 +32,13 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "browserslist": "^4.23.2",
35
- "lightningcss": "^1.25.1",
35
+ "lightningcss": "^1.27.0",
36
36
  "prop-types": "^15.8.1"
37
37
  },
38
38
  "devDependencies": {
39
- "@types/node": "^22.7.4",
40
- "@types/prop-types": "^15.7.12",
41
- "tsx": "^4.16.5",
42
- "typescript": "^5.6.2"
39
+ "@types/node": "^22.8.2",
40
+ "@types/prop-types": "^15.7.13",
41
+ "tsx": "^4.19.2",
42
+ "typescript": "^5.6.3"
43
43
  }
44
44
  }