Skip to content

Commit 6be26cd

Browse files
P1X3LP1X3L
committed
fix: add transforms for font weight and family and remove string tokens
Signed-off-by: Paul-Xavier Ceccaldi <[email protected]>
1 parent 3cfda57 commit 6be26cd

File tree

5 files changed

+34
-117
lines changed

5 files changed

+34
-117
lines changed

‎lib/src/theme/build-tokens.js‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import StyleDictionary from 'style-dictionary'
88

99
const pxToRemTypes = ['spacing', 'fontSize', 'borderRadius']
1010

11-
// Enregistrer le transform
1211
StyleDictionary.registerTransform({
1312
filter: token => {
1413
return (
@@ -29,6 +28,24 @@ StyleDictionary.registerTransform({
2928
type: 'value',
3029
})
3130

31+
StyleDictionary.registerTransform({
32+
filter: token => ['black', 'bold', 'medium', 'regular', 'semi-bold'].includes(token.value),
33+
name: 'font/weightStringToNumber',
34+
transform: token =>
35+
({ black: '900', bold: '700', medium: '500', regular: '400', 'semi-bold': '600' })[token.value],
36+
type: 'value',
37+
})
38+
39+
StyleDictionary.registerTransform({
40+
filter: token => token.name.startsWith('font-family-'),
41+
name: 'font/familyWithFallback',
42+
transform: token => {
43+
const fontFamily = token.name.endsWith('-title') ? 'welcome-font' : token.value
44+
return `'${fontFamily}', sans-serif`
45+
},
46+
type: 'value',
47+
})
48+
3249
StyleDictionary.registerTransform({
3350
filter: token => token.name === 'border-radius-full',
3451
name: 'size/radiusToInfinity',
@@ -38,7 +55,6 @@ StyleDictionary.registerTransform({
3855
type: 'value',
3956
})
4057

41-
// Configuration
4258
const sd = new StyleDictionary({
4359
platforms: {
4460
css: {
@@ -51,7 +67,14 @@ const sd = new StyleDictionary({
5167
options: { selector: '@theme static' },
5268
},
5369
],
54-
transforms: ['name/kebab', 'size/pxToRem-custom', 'size/radiusToInfinity', 'color/css'],
70+
transforms: [
71+
'name/kebab',
72+
'font/weightStringToNumber',
73+
'font/familyWithFallback',
74+
'size/pxToRem-custom',
75+
'size/radiusToInfinity',
76+
'color/css',
77+
],
5578
},
5679
},
5780
source: [path.join(__dirname, './tokens/*.json')],

‎lib/src/theme/clean-tokens.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ function removeExtensions(obj: any): any {
205205

206206
const cleaned: any = {}
207207
for (const [key, value] of Object.entries(obj)) {
208-
if (key === '$extensions') {
208+
if (key === '$extensions' || key.includes('strings-')) {
209209
continue
210210
}
211211
cleaned[key] = removeExtensions(value)

‎lib/src/theme/theme.css‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -991,16 +991,6 @@
991991
--components-dimensions-pagination-border-radius: 0.5rem;
992992
--components-dimensions-pagination-border-width-unchecked: 1px;
993993
--components-dimensions-pagination-border-width-checked: 2px;
994-
--components-strings-english-pagination-control-first: First;
995-
--components-strings-english-pagination-control-previous: Previous;
996-
--components-strings-english-pagination-control-next: Next;
997-
--components-strings-english-pagination-control-last: Last;
998-
--components-strings-english-pagination-page-collapsed: ...;
999-
--components-strings-french-pagination-control-first: Première;
1000-
--components-strings-french-pagination-control-previous: Précédent;
1001-
--components-strings-french-pagination-control-next: Suivante;
1002-
--components-strings-french-pagination-control-last: Dernière;
1003-
--components-strings-french-pagination-page-collapsed: ...;
1004994
--color-yellow-10: #fff8d9;
1005995
--color-yellow-20: #fff1b2;
1006996
--color-yellow-30: #ffe166;

‎lib/src/theme/tokens/navigation.json‎

Lines changed: 0 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -993,91 +993,5 @@
993993
}
994994
}
995995
}
996-
},
997-
"components-strings-english": {
998-
"pagination": {
999-
"control": {
1000-
"first": {
1001-
"value": "First",
1002-
"type": "string",
1003-
"scope": [
1004-
"ALL_SCOPES"
1005-
]
1006-
},
1007-
"previous": {
1008-
"value": "Previous",
1009-
"type": "string",
1010-
"scope": [
1011-
"ALL_SCOPES"
1012-
]
1013-
},
1014-
"next": {
1015-
"value": "Next",
1016-
"type": "string",
1017-
"scope": [
1018-
"ALL_SCOPES"
1019-
]
1020-
},
1021-
"last": {
1022-
"value": "Last",
1023-
"type": "string",
1024-
"scope": [
1025-
"ALL_SCOPES"
1026-
]
1027-
}
1028-
},
1029-
"page": {
1030-
"collapsed": {
1031-
"value": "...",
1032-
"type": "string",
1033-
"scope": [
1034-
"ALL_SCOPES"
1035-
]
1036-
}
1037-
}
1038-
}
1039-
},
1040-
"components-strings-french": {
1041-
"pagination": {
1042-
"control": {
1043-
"first": {
1044-
"value": "Première",
1045-
"type": "string",
1046-
"scope": [
1047-
"ALL_SCOPES"
1048-
]
1049-
},
1050-
"previous": {
1051-
"value": "Précédent",
1052-
"type": "string",
1053-
"scope": [
1054-
"ALL_SCOPES"
1055-
]
1056-
},
1057-
"next": {
1058-
"value": "Suivante",
1059-
"type": "string",
1060-
"scope": [
1061-
"ALL_SCOPES"
1062-
]
1063-
},
1064-
"last": {
1065-
"value": "Dernière",
1066-
"type": "string",
1067-
"scope": [
1068-
"ALL_SCOPES"
1069-
]
1070-
}
1071-
},
1072-
"page": {
1073-
"collapsed": {
1074-
"value": "...",
1075-
"type": "string",
1076-
"scope": [
1077-
"ALL_SCOPES"
1078-
]
1079-
}
1080-
}
1081-
}
1082996
}
1083997
}

‎lib/src/theme/variables.css‎

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -806,16 +806,6 @@
806806
--components-dimensions-pagination-border-radius: 0.5rem;
807807
--components-dimensions-pagination-border-width-unchecked: 1px;
808808
--components-dimensions-pagination-border-width-checked: 2px;
809-
--components-strings-english-pagination-control-first: First;
810-
--components-strings-english-pagination-control-previous: Previous;
811-
--components-strings-english-pagination-control-next: Next;
812-
--components-strings-english-pagination-control-last: Last;
813-
--components-strings-english-pagination-page-collapsed: ...;
814-
--components-strings-french-pagination-control-first: Première;
815-
--components-strings-french-pagination-control-previous: Précédent;
816-
--components-strings-french-pagination-control-next: Suivante;
817-
--components-strings-french-pagination-control-last: Dernière;
818-
--components-strings-french-pagination-page-collapsed: ...;
819809
--color-yellow-10: #fff8d9;
820810
--color-yellow-20: #fff1b2;
821811
--color-yellow-30: #ffe166;
@@ -1241,13 +1231,13 @@
12411231
--font-size-5xl: 3rem;
12421232
--font-size-6xl: 3.75rem;
12431233
--font-size-7xl: 4.5rem;
1244-
--font-family-title: Welcome Web;
1245-
--font-family-body: Work Sans;
1246-
--font-weight-regular: regular;
1247-
--font-weight-medium: medium;
1248-
--font-weight-semi-bold: semi-bold;
1249-
--font-weight-bold: bold;
1250-
--font-weight-black: black;
1234+
--font-family-title: 'welcome-font', sans-serif;
1235+
--font-family-body: 'Work Sans', sans-serif;
1236+
--font-weight-regular: 400;
1237+
--font-weight-medium: 500;
1238+
--font-weight-semi-bold: 600;
1239+
--font-weight-bold: 700;
1240+
--font-weight-black: 900;
12511241
--font-line-height-xs: 120%;
12521242
--font-line-height-sm: 130%;
12531243
--font-line-height-md: 140%;

0 commit comments

Comments
 (0)