@entur/typography 2.0.0-beta.2 → 2.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.
|
@@ -144,20 +144,19 @@
|
|
|
144
144
|
/*
|
|
145
145
|
* Typography Display Modes
|
|
146
146
|
*
|
|
147
|
-
* This system allows you to control typography scaling based on
|
|
148
|
-
* Use the
|
|
147
|
+
* This system allows you to control typography scaling based on view size.
|
|
148
|
+
* Use the vie-mode attribute to switch between different typography scales:
|
|
149
149
|
*
|
|
150
|
-
* -
|
|
151
|
-
* -
|
|
150
|
+
* - Compact: [view-mode='compact'] or no attribute (responsive)
|
|
151
|
+
* - Display: [view-mode='display'] for big screens, kiosks, etc.
|
|
152
152
|
*
|
|
153
153
|
* Usage:
|
|
154
|
-
* <html
|
|
154
|
+
* <html view-mode="display"> or <div view-mode="display">
|
|
155
155
|
*
|
|
156
156
|
* The system automatically handles responsive behavior within each mode.
|
|
157
157
|
*/
|
|
158
158
|
/* Primitive size */
|
|
159
159
|
:root {
|
|
160
|
-
/* Mode 1 */
|
|
161
160
|
/* number */
|
|
162
161
|
--size-0: 0rem;
|
|
163
162
|
--size-1: 0.0625rem;
|
|
@@ -194,8 +193,8 @@
|
|
|
194
193
|
}
|
|
195
194
|
|
|
196
195
|
:root,
|
|
197
|
-
[
|
|
198
|
-
/*
|
|
196
|
+
[view-mode=standard] {
|
|
197
|
+
/* Standard - number */
|
|
199
198
|
--font-line-height-body-xs: var(--size-7);
|
|
200
199
|
--font-line-height-body-s: var(--size-8);
|
|
201
200
|
--font-line-height-body-lg: var(--size-9);
|
|
@@ -236,9 +235,7 @@
|
|
|
236
235
|
}
|
|
237
236
|
@media screen and (min-width: 50rem) {
|
|
238
237
|
:root,
|
|
239
|
-
[
|
|
240
|
-
/* Desktop override for mobile mode - number */
|
|
241
|
-
/* number */
|
|
238
|
+
[view-mode=standard] {
|
|
242
239
|
--font-line-height-body-xs: var(--size-7);
|
|
243
240
|
--font-line-height-body-s: var(--size-8);
|
|
244
241
|
--font-line-height-body-m: var(--size-9);
|
|
@@ -279,8 +276,49 @@
|
|
|
279
276
|
}
|
|
280
277
|
}
|
|
281
278
|
|
|
282
|
-
[
|
|
283
|
-
/* number */
|
|
279
|
+
[view-mode=compact] {
|
|
280
|
+
/* Compact - number */
|
|
281
|
+
--font-line-height-body-xs: var(--size-7);
|
|
282
|
+
--font-line-height-body-s: var(--size-8);
|
|
283
|
+
--font-line-height-body-lg: var(--size-9);
|
|
284
|
+
--font-line-height-body-m: var(--size-9);
|
|
285
|
+
--font-line-height-body-xl: var(--size-10);
|
|
286
|
+
--font-line-height-heading-s: var(--size-7);
|
|
287
|
+
--font-line-height-heading-xs: var(--size-7);
|
|
288
|
+
--font-line-height-heading-m: var(--size-8);
|
|
289
|
+
--font-line-height-heading-lg: var(--size-9);
|
|
290
|
+
--font-line-height-heading-xl: var(--size-10);
|
|
291
|
+
--font-line-height-heading-2xl: var(--size-11);
|
|
292
|
+
--font-paragraph-spacing-body-xs: var(--size-4);
|
|
293
|
+
--font-paragraph-spacing-body-s: var(--size-5);
|
|
294
|
+
--font-paragraph-spacing-body-m: var(--size-7);
|
|
295
|
+
--font-paragraph-spacing-body-lg: var(--size-8);
|
|
296
|
+
--font-paragraph-spacing-body-xl: var(--size-8);
|
|
297
|
+
--font-paragraph-spacing-heading-s: var(--size-4);
|
|
298
|
+
--font-paragraph-spacing-heading-xs: var(--size-4);
|
|
299
|
+
--font-paragraph-spacing-heading-lg: var(--size-5);
|
|
300
|
+
--font-paragraph-spacing-heading-m: var(--size-5);
|
|
301
|
+
--font-paragraph-spacing-heading-2xl: var(--size-7);
|
|
302
|
+
--font-paragraph-spacing-heading-xl: var(--size-7);
|
|
303
|
+
--font-size-body-xs: var(--size-5);
|
|
304
|
+
--font-size-body-s: var(--size-6);
|
|
305
|
+
--font-size-body-lg: var(--size-7);
|
|
306
|
+
--font-size-body-m: var(--size-7);
|
|
307
|
+
--font-size-body-xl: var(--size-8);
|
|
308
|
+
--font-size-heading-xs: var(--size-5);
|
|
309
|
+
--font-size-heading-s: var(--size-6);
|
|
310
|
+
--font-size-heading-m: var(--size-7);
|
|
311
|
+
--font-size-heading-lg: var(--size-8);
|
|
312
|
+
--font-size-heading-xl: var(--size-9);
|
|
313
|
+
--font-size-heading-2xl: var(--size-10);
|
|
314
|
+
/* string */
|
|
315
|
+
--font-family-nationale: Nationale;
|
|
316
|
+
--font-weight-body: 500;
|
|
317
|
+
--font-weight-heading: 600;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
[view-mode=display] {
|
|
321
|
+
/* Display - number */
|
|
284
322
|
--font-line-height-body-xs: var(--size-10);
|
|
285
323
|
--font-line-height-body-s: var(--size-11);
|
|
286
324
|
--font-line-height-body-m: var(--size-14);
|
|
@@ -368,14 +368,14 @@ summary {
|
|
|
368
368
|
/*
|
|
369
369
|
* Typography Display Modes
|
|
370
370
|
*
|
|
371
|
-
* This system allows you to control typography scaling based on
|
|
372
|
-
* Use the
|
|
371
|
+
* This system allows you to control typography scaling based on view size.
|
|
372
|
+
* Use the vie-mode attribute to switch between different typography scales:
|
|
373
373
|
*
|
|
374
|
-
* -
|
|
375
|
-
* -
|
|
374
|
+
* - Compact: [view-mode='compact'] or no attribute (responsive)
|
|
375
|
+
* - Display: [view-mode='display'] for big screens, kiosks, etc.
|
|
376
376
|
*
|
|
377
377
|
* Usage:
|
|
378
|
-
* <html
|
|
378
|
+
* <html view-mode="display"> or <div view-mode="display">
|
|
379
379
|
*
|
|
380
380
|
* The system automatically handles responsive behavior within each mode.
|
|
381
381
|
*/
|
|
@@ -383,7 +383,6 @@ summary {
|
|
|
383
383
|
/* Primitive size */
|
|
384
384
|
|
|
385
385
|
:root {
|
|
386
|
-
/* Mode 1 */
|
|
387
386
|
/* number */
|
|
388
387
|
--size-0: 0rem;
|
|
389
388
|
--size-1: 0.0625rem;
|
|
@@ -420,8 +419,8 @@ summary {
|
|
|
420
419
|
}
|
|
421
420
|
|
|
422
421
|
:root,
|
|
423
|
-
[
|
|
424
|
-
/*
|
|
422
|
+
[view-mode=standard] {
|
|
423
|
+
/* Standard - number */
|
|
425
424
|
--font-line-height-body-xs: var(--size-7);
|
|
426
425
|
--font-line-height-body-s: var(--size-8);
|
|
427
426
|
--font-line-height-body-lg: var(--size-9);
|
|
@@ -463,9 +462,7 @@ summary {
|
|
|
463
462
|
|
|
464
463
|
@media screen and (min-width: 50rem) {
|
|
465
464
|
:root,
|
|
466
|
-
[
|
|
467
|
-
/* Desktop override for mobile mode - number */
|
|
468
|
-
/* number */
|
|
465
|
+
[view-mode=standard] {
|
|
469
466
|
--font-line-height-body-xs: var(--size-7);
|
|
470
467
|
--font-line-height-body-s: var(--size-8);
|
|
471
468
|
--font-line-height-body-m: var(--size-9);
|
|
@@ -506,8 +503,49 @@ summary {
|
|
|
506
503
|
}
|
|
507
504
|
}
|
|
508
505
|
|
|
509
|
-
[
|
|
510
|
-
/* number */
|
|
506
|
+
[view-mode=compact] {
|
|
507
|
+
/* Compact - number */
|
|
508
|
+
--font-line-height-body-xs: var(--size-7);
|
|
509
|
+
--font-line-height-body-s: var(--size-8);
|
|
510
|
+
--font-line-height-body-lg: var(--size-9);
|
|
511
|
+
--font-line-height-body-m: var(--size-9);
|
|
512
|
+
--font-line-height-body-xl: var(--size-10);
|
|
513
|
+
--font-line-height-heading-s: var(--size-7);
|
|
514
|
+
--font-line-height-heading-xs: var(--size-7);
|
|
515
|
+
--font-line-height-heading-m: var(--size-8);
|
|
516
|
+
--font-line-height-heading-lg: var(--size-9);
|
|
517
|
+
--font-line-height-heading-xl: var(--size-10);
|
|
518
|
+
--font-line-height-heading-2xl: var(--size-11);
|
|
519
|
+
--font-paragraph-spacing-body-xs: var(--size-4);
|
|
520
|
+
--font-paragraph-spacing-body-s: var(--size-5);
|
|
521
|
+
--font-paragraph-spacing-body-m: var(--size-7);
|
|
522
|
+
--font-paragraph-spacing-body-lg: var(--size-8);
|
|
523
|
+
--font-paragraph-spacing-body-xl: var(--size-8);
|
|
524
|
+
--font-paragraph-spacing-heading-s: var(--size-4);
|
|
525
|
+
--font-paragraph-spacing-heading-xs: var(--size-4);
|
|
526
|
+
--font-paragraph-spacing-heading-lg: var(--size-5);
|
|
527
|
+
--font-paragraph-spacing-heading-m: var(--size-5);
|
|
528
|
+
--font-paragraph-spacing-heading-2xl: var(--size-7);
|
|
529
|
+
--font-paragraph-spacing-heading-xl: var(--size-7);
|
|
530
|
+
--font-size-body-xs: var(--size-5);
|
|
531
|
+
--font-size-body-s: var(--size-6);
|
|
532
|
+
--font-size-body-lg: var(--size-7);
|
|
533
|
+
--font-size-body-m: var(--size-7);
|
|
534
|
+
--font-size-body-xl: var(--size-8);
|
|
535
|
+
--font-size-heading-xs: var(--size-5);
|
|
536
|
+
--font-size-heading-s: var(--size-6);
|
|
537
|
+
--font-size-heading-m: var(--size-7);
|
|
538
|
+
--font-size-heading-lg: var(--size-8);
|
|
539
|
+
--font-size-heading-xl: var(--size-9);
|
|
540
|
+
--font-size-heading-2xl: var(--size-10);
|
|
541
|
+
/* string */
|
|
542
|
+
--font-family-nationale: Nationale;
|
|
543
|
+
--font-weight-body: 500;
|
|
544
|
+
--font-weight-heading: 600;
|
|
545
|
+
}
|
|
546
|
+
|
|
547
|
+
[view-mode=display] {
|
|
548
|
+
/* Display - number */
|
|
511
549
|
--font-line-height-body-xs: var(--size-10);
|
|
512
550
|
--font-line-height-body-s: var(--size-11);
|
|
513
551
|
--font-line-height-body-m: var(--size-14);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/typography",
|
|
3
|
-
"version": "2.0.0
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"license": "SEE LICENSE IN README.md",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/typography.cjs.js",
|
|
@@ -66,9 +66,11 @@
|
|
|
66
66
|
"@entur/tokens": "^3.19.3",
|
|
67
67
|
"@entur/utils": "^0.12.5",
|
|
68
68
|
"classnames": "^2.5.1",
|
|
69
|
-
"glob": "^11.0.0",
|
|
70
69
|
"modern-normalize": "^3.0.1"
|
|
71
70
|
},
|
|
71
|
+
"optionalDependencies": {
|
|
72
|
+
"glob": "^11.0.3"
|
|
73
|
+
},
|
|
72
74
|
"devDependencies": {
|
|
73
75
|
"@testing-library/jest-dom": "^5.17.0",
|
|
74
76
|
"@testing-library/react": "^10.4.9",
|
|
@@ -82,5 +84,5 @@
|
|
|
82
84
|
"vite": "^7.1.3",
|
|
83
85
|
"vite-plugin-dts": "^4.5.4"
|
|
84
86
|
},
|
|
85
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "b4c13c66884fb73f99465961367af15119a66bda"
|
|
86
88
|
}
|
|
@@ -65,24 +65,23 @@ import { fileURLToPath } from 'url';
|
|
|
65
65
|
const __filename = fileURLToPath(import.meta.url);
|
|
66
66
|
const __dirname = path.dirname(__filename);
|
|
67
67
|
|
|
68
|
-
//
|
|
68
|
+
// Try to use glob if available, fallback to Node.js built-ins
|
|
69
69
|
let glob;
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
process.exit(1);
|
|
70
|
+
let useGlob = false;
|
|
71
|
+
|
|
72
|
+
// Initialize glob detection
|
|
73
|
+
async function initializeGlob() {
|
|
74
|
+
try {
|
|
75
|
+
const globModule = await import('glob');
|
|
76
|
+
glob = globModule.default || globModule;
|
|
77
|
+
useGlob = true;
|
|
78
|
+
console.log('📦 Using glob package for pattern matching');
|
|
79
|
+
} catch (error) {
|
|
80
|
+
console.log('📁 Using Node.js built-ins for file discovery');
|
|
81
|
+
console.log(
|
|
82
|
+
' (Install glob for better pattern matching: npm install glob or yarn add glob)',
|
|
83
|
+
);
|
|
84
|
+
}
|
|
86
85
|
}
|
|
87
86
|
|
|
88
87
|
// Configuration
|
|
@@ -937,15 +936,23 @@ function updateComponents(content) {
|
|
|
937
936
|
/**
|
|
938
937
|
* Find files matching the given pattern in allowed directories
|
|
939
938
|
*
|
|
940
|
-
*
|
|
941
|
-
* - Single glob call with brace expansion instead of multiple calls
|
|
942
|
-
* - Set-based extension filtering for O(1) lookups
|
|
943
|
-
* - No array concatenation in loops
|
|
939
|
+
* Uses glob if available for better pattern matching, falls back to Node.js built-ins
|
|
944
940
|
*
|
|
945
|
-
* @param {string} pattern -
|
|
941
|
+
* @param {string} pattern - File pattern to match (e.g., '*.{ts,tsx,js,jsx}')
|
|
946
942
|
* @returns {string[]} Array of matching file paths
|
|
947
943
|
*/
|
|
948
944
|
function findFiles(pattern) {
|
|
945
|
+
if (useGlob) {
|
|
946
|
+
return findFilesWithGlob(pattern);
|
|
947
|
+
} else {
|
|
948
|
+
return findFilesWithNode(pattern);
|
|
949
|
+
}
|
|
950
|
+
}
|
|
951
|
+
|
|
952
|
+
/**
|
|
953
|
+
* Find files using glob package (preferred method)
|
|
954
|
+
*/
|
|
955
|
+
function findFilesWithGlob(pattern) {
|
|
949
956
|
const allFiles = [];
|
|
950
957
|
|
|
951
958
|
// Process directory patterns
|
|
@@ -993,6 +1000,88 @@ function findFiles(pattern) {
|
|
|
993
1000
|
return uniqueFiles;
|
|
994
1001
|
}
|
|
995
1002
|
|
|
1003
|
+
/**
|
|
1004
|
+
* Find files using Node.js built-ins (fallback method)
|
|
1005
|
+
*/
|
|
1006
|
+
function findFilesWithNode(pattern) {
|
|
1007
|
+
const allFiles = [];
|
|
1008
|
+
|
|
1009
|
+
// Parse the pattern to extract extensions
|
|
1010
|
+
const extensions = pattern.match(/\*\.\{([^}]+)\}/);
|
|
1011
|
+
const fileExtensions = extensions
|
|
1012
|
+
? extensions[1].split(',').map(ext => `.${ext.trim()}`)
|
|
1013
|
+
: ['.ts', '.tsx', '.js', '.jsx', '.scss', '.css'];
|
|
1014
|
+
|
|
1015
|
+
const extensionSet = new Set(fileExtensions);
|
|
1016
|
+
|
|
1017
|
+
// Helper function to check if a path should be ignored
|
|
1018
|
+
function shouldIgnore(filePath) {
|
|
1019
|
+
return BLOCKED_DIRECTORIES.some(blockedPattern => {
|
|
1020
|
+
// Simple pattern matching for common blocked directories
|
|
1021
|
+
if (blockedPattern.includes('**')) {
|
|
1022
|
+
const basePattern = blockedPattern.replace('/**', '');
|
|
1023
|
+
return filePath.includes(basePattern);
|
|
1024
|
+
}
|
|
1025
|
+
return filePath.includes(blockedPattern);
|
|
1026
|
+
});
|
|
1027
|
+
}
|
|
1028
|
+
|
|
1029
|
+
// Helper function to recursively find files
|
|
1030
|
+
function findFilesRecursive(dir, relativePath = '') {
|
|
1031
|
+
try {
|
|
1032
|
+
const items = fs.readdirSync(dir, { withFileTypes: true });
|
|
1033
|
+
|
|
1034
|
+
for (const item of items) {
|
|
1035
|
+
const itemPath = path.join(dir, item.name);
|
|
1036
|
+
const relativeItemPath = path.join(relativePath, item.name);
|
|
1037
|
+
|
|
1038
|
+
// Skip if this path should be ignored
|
|
1039
|
+
if (shouldIgnore(relativeItemPath)) {
|
|
1040
|
+
continue;
|
|
1041
|
+
}
|
|
1042
|
+
|
|
1043
|
+
if (item.isDirectory()) {
|
|
1044
|
+
// Recursively search subdirectories
|
|
1045
|
+
findFilesRecursive(itemPath, relativeItemPath);
|
|
1046
|
+
} else if (item.isFile()) {
|
|
1047
|
+
// Check if file has matching extension
|
|
1048
|
+
const ext = path.extname(item.name).toLowerCase();
|
|
1049
|
+
if (extensionSet.has(ext)) {
|
|
1050
|
+
allFiles.push(relativeItemPath);
|
|
1051
|
+
}
|
|
1052
|
+
}
|
|
1053
|
+
}
|
|
1054
|
+
} catch (error) {
|
|
1055
|
+
// Skip directories that can't be read (permissions, etc.)
|
|
1056
|
+
console.warn(
|
|
1057
|
+
`Warning: Could not read directory ${dir}: ${error.message}`,
|
|
1058
|
+
);
|
|
1059
|
+
}
|
|
1060
|
+
}
|
|
1061
|
+
|
|
1062
|
+
// Process each allowed directory
|
|
1063
|
+
for (const allowedDir of ALLOWED_DIRECTORIES) {
|
|
1064
|
+
if (allowedDir.includes('**')) {
|
|
1065
|
+
// Directory pattern (e.g., src/**)
|
|
1066
|
+
const baseDir = allowedDir.replace('/**', '');
|
|
1067
|
+
const fullPath = path.resolve(baseDir);
|
|
1068
|
+
|
|
1069
|
+
if (fs.existsSync(fullPath) && fs.statSync(fullPath).isDirectory()) {
|
|
1070
|
+
findFilesRecursive(fullPath, baseDir);
|
|
1071
|
+
}
|
|
1072
|
+
} else {
|
|
1073
|
+
// File pattern (e.g., *.jsx) - not supported in this implementation
|
|
1074
|
+
// as it would require more complex pattern matching
|
|
1075
|
+
console.warn(
|
|
1076
|
+
`Warning: File pattern "${allowedDir}" not supported in Node.js-only mode. Use directory patterns like "src/**" instead.`,
|
|
1077
|
+
);
|
|
1078
|
+
}
|
|
1079
|
+
}
|
|
1080
|
+
|
|
1081
|
+
// Remove duplicates and return
|
|
1082
|
+
return [...new Set(allFiles)];
|
|
1083
|
+
}
|
|
1084
|
+
|
|
996
1085
|
function updateImportsAndComponents(content) {
|
|
997
1086
|
let updatedContent = content;
|
|
998
1087
|
let changes = 0;
|
|
@@ -1281,6 +1370,9 @@ function showNextSteps() {
|
|
|
1281
1370
|
}
|
|
1282
1371
|
|
|
1283
1372
|
async function main() {
|
|
1373
|
+
// Initialize glob detection
|
|
1374
|
+
await initializeGlob();
|
|
1375
|
+
|
|
1284
1376
|
// Show help if requested
|
|
1285
1377
|
if (process.argv.includes('--help') || process.argv.includes('-h')) {
|
|
1286
1378
|
console.log('🎨 Typography Migration Script');
|
|
@@ -1291,7 +1383,7 @@ async function main() {
|
|
|
1291
1383
|
console.log(' npx @entur/typography@latest migrate [options]');
|
|
1292
1384
|
console.log(' yarn dlx @entur/typography@latest migrate [options]');
|
|
1293
1385
|
console.log('');
|
|
1294
|
-
console.log(' # Direct execution (
|
|
1386
|
+
console.log(' # Direct execution (uses Node.js built-ins, glob optional)');
|
|
1295
1387
|
console.log(' node scripts/migrate-typography.js [options]');
|
|
1296
1388
|
console.log('');
|
|
1297
1389
|
console.log(' # Local development');
|