@aleph-alpha/config-css 0.21.0 → 0.21.1

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 (6) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/README.md +1 -1
  3. package/dist/index.js +531 -526
  4. package/package.json +3 -3
  5. package/src/presetWebFontsAlephAlpha.ts +37 -13
  6. package/src/utils/convert-fonts.js +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@aleph-alpha/config-css",
3
3
  "license": "Apache-2.0",
4
- "version": "0.21.0",
4
+ "version": "0.21.1",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",
7
7
  "prettier": "@aleph-alpha/prettier-config-frontend",
@@ -24,8 +24,8 @@
24
24
  "devDependencies": {
25
25
  "style-dictionary": "^4.0.1",
26
26
  "vite-plugin-dts": "^4.0.0",
27
- "@aleph-alpha/prettier-config-frontend": "0.4.0",
28
- "@aleph-alpha/eslint-config-frontend": "0.5.0"
27
+ "@aleph-alpha/eslint-config-frontend": "0.5.0",
28
+ "@aleph-alpha/prettier-config-frontend": "0.4.0"
29
29
  },
30
30
  "scripts": {
31
31
  "transform:global": "npx token-transformer ./tokens.json ./transformed-tokens/global.json global,\"Spark Border Radius/Mode 1\",\"Spark Spacings/Mode 1\",\"Spark Text/Mode 1\" \"Spark Colors/Light mode/primitives\" --throwErrorWhenNotResolved",
package/src/presetWebFontsAlephAlpha.ts CHANGED
@@ -12,6 +12,13 @@ import { inter500 } from './assets/fonts/inter500.woff2';
12
12
  import { inter600 } from './assets/fonts/inter600.woff2';
13
13
  import { inter700 } from './assets/fonts/inter700.woff2';
14
14
 
15
+ const LEGACY_DATA_URI_PREFIX = 'data:@file/octet-stream;base64,';
16
+
17
+ const normalizeEmbeddedFontDataUri = (fontDataUri: string, mimeType = 'font/woff2') => {
18
+ if (!fontDataUri.startsWith(LEGACY_DATA_URI_PREFIX)) return fontDataUri;
19
+ return `data:${mimeType};base64,${fontDataUri.slice(LEGACY_DATA_URI_PREFIX.length)}`;
20
+ };
21
+
15
22
  export const presetWebFontsAlephAlpha = (): Preset => ({
16
23
  name: '@aleph-alpha/ds-fonts',
17
24
  theme: {
@@ -25,28 +32,45 @@ export const presetWebFontsAlephAlpha = (): Preset => ({
25
32
  preflights: [
26
33
  {
27
34
  getCSS() {
35
+ const raleway500Src = normalizeEmbeddedFontDataUri(raleway500);
36
+ const raleway600Src = normalizeEmbeddedFontDataUri(raleway600);
37
+ const raleway700Src = normalizeEmbeddedFontDataUri(raleway700);
38
+ const roboto500Src = normalizeEmbeddedFontDataUri(roboto500);
39
+ const roboto700Src = normalizeEmbeddedFontDataUri(roboto700);
40
+ const montserrat500Src = normalizeEmbeddedFontDataUri(montserrat500);
41
+ const montserrat600Src = normalizeEmbeddedFontDataUri(montserrat600);
42
+ const montserrat700Src = normalizeEmbeddedFontDataUri(montserrat700);
43
+ const inter400Src = normalizeEmbeddedFontDataUri(inter400);
44
+ const inter500Src = normalizeEmbeddedFontDataUri(inter500);
45
+ const inter600Src = normalizeEmbeddedFontDataUri(inter600);
46
+ const inter700Src = normalizeEmbeddedFontDataUri(inter700);
47
+
28
48
  return `
49
+ :root {
50
+ --custom-font-family: Raleway;
51
+ }
52
+
29
53
  /* Raleway fonts (legacy support) */
30
54
  @font-face {
31
55
  font-display: swap;
32
56
  font-family: 'Raleway';
33
57
  font-style: normal;
34
58
  font-weight: 500;
35
- src: url('${raleway500}') format('woff2');
59
+ src: url('${raleway500Src}') format('woff2');
36
60
  }
37
61
  @font-face {
38
62
  font-display: swap;
39
63
  font-family: 'Raleway';
40
64
  font-style: normal;
41
65
  font-weight: 600;
42
- src: url('${raleway600}') format('woff2');
66
+ src: url('${raleway600Src}') format('woff2');
43
67
  }
44
68
  @font-face {
45
69
  font-display: swap;
46
70
  font-family: 'Raleway';
47
71
  font-style: normal;
48
72
  font-weight: 700;
49
- src: url('${raleway700}') format('woff2');
73
+ src: url('${raleway700Src}') format('woff2');
50
74
  }
51
75
 
52
76
  /* Roboto fonts (legacy support) */
@@ -55,21 +79,21 @@ export const presetWebFontsAlephAlpha = (): Preset => ({
55
79
  font-family: 'Roboto';
56
80
  font-style: normal;
57
81
  font-weight: 500;
58
- src: url('${roboto500}') format('woff');
82
+ src: url('${roboto500Src}') format('woff2');
59
83
  }
60
84
  @font-face {
61
85
  font-display: swap;
62
86
  font-family: 'Roboto';
63
87
  font-style: normal;
64
88
  font-weight: 600;
65
- src: url('${roboto500}') format('woff');
89
+ src: url('${roboto500Src}') format('woff2');
66
90
  }
67
91
  @font-face {
68
92
  font-display: swap;
69
93
  font-family: 'Roboto';
70
94
  font-style: normal;
71
95
  font-weight: 700;
72
- src: url('${roboto700}') format('woff');
96
+ src: url('${roboto700Src}') format('woff2');
73
97
  }
74
98
 
75
99
  /* Montserrat fonts (new design system) */
@@ -78,21 +102,21 @@ export const presetWebFontsAlephAlpha = (): Preset => ({
78
102
  font-family: 'Montserrat';
79
103
  font-style: normal;
80
104
  font-weight: 500;
81
- src: url('${montserrat500}') format('woff2');
105
+ src: url('${montserrat500Src}') format('woff2');
82
106
  }
83
107
  @font-face {
84
108
  font-display: swap;
85
109
  font-family: 'Montserrat';
86
110
  font-style: normal;
87
111
  font-weight: 600;
88
- src: url('${montserrat600}') format('woff2');
112
+ src: url('${montserrat600Src}') format('woff2');
89
113
  }
90
114
  @font-face {
91
115
  font-display: swap;
92
116
  font-family: 'Montserrat';
93
117
  font-style: normal;
94
118
  font-weight: 700;
95
- src: url('${montserrat700}') format('woff2');
119
+ src: url('${montserrat700Src}') format('woff2');
96
120
  }
97
121
 
98
122
  /* Inter fonts (new design system) */
@@ -101,28 +125,28 @@ export const presetWebFontsAlephAlpha = (): Preset => ({
101
125
  font-family: 'Inter';
102
126
  font-style: normal;
103
127
  font-weight: 400;
104
- src: url('${inter400}') format('woff2');
128
+ src: url('${inter400Src}') format('woff2');
105
129
  }
106
130
  @font-face {
107
131
  font-display: swap;
108
132
  font-family: 'Inter';
109
133
  font-style: normal;
110
134
  font-weight: 500;
111
- src: url('${inter500}') format('woff2');
135
+ src: url('${inter500Src}') format('woff2');
112
136
  }
113
137
  @font-face {
114
138
  font-display: swap;
115
139
  font-family: 'Inter';
116
140
  font-style: normal;
117
141
  font-weight: 600;
118
- src: url('${inter600}') format('woff2');
142
+ src: url('${inter600Src}') format('woff2');
119
143
  }
120
144
  @font-face {
121
145
  font-display: swap;
122
146
  font-family: 'Inter';
123
147
  font-style: normal;
124
148
  font-weight: 700;
125
- src: url('${inter700}') format('woff2');
149
+ src: url('${inter700Src}') format('woff2');
126
150
  }
127
151
  `;
128
152
  },
package/src/utils/convert-fonts.js CHANGED
@@ -16,7 +16,7 @@ function convertWoff2ToTs(inputFile, outputFile) {
16
16
 
17
17
  // Create the TypeScript content
18
18
  const tsContent = `export const ${fontName} =
19
- 'data:@file/octet-stream;base64,${base64}';`;
19
+ 'data:font/woff2;base64,${base64}';`;
20
20
 
21
21
  // Write the TypeScript file
22
22
  fs.writeFileSync(outputFile, tsContent);