Skip to content

Commit 567e185

Browse files
BenOsodracBenOsodrac
committed
update prefix to only affect css variables fallbacks
1 parent 17da822 commit 567e185

File tree

2 files changed

+88
-91
lines changed

2 files changed

+88
-91
lines changed

‎core/scripts/tokens/index.mjs‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const {
1616
generateSpaceUtilityClasses,
1717
removeConsecutiveRepeatedWords,
1818
setVariablePrefixValue,
19-
setClassesPrefixValue,
19+
setClassesAndScssPrefixValue: setClassesPrefixValue,
2020
generateRadiusUtilityClasses,
2121
generateBorderUtilityClasses,
2222
generateFontUtilityClasses,
@@ -26,16 +26,17 @@ const {
2626
import StyleDictionary from 'style-dictionary';
2727

2828
const customHeader = `// Do not edit directly, this file was auto-generated.`;
29+
// Set the prefix for classes
30+
setClassesPrefixValue('ion');
31+
// Set the prefix for variables
32+
setVariablePrefixValue('token');
2933

3034
// SCSS variables format
3135
StyleDictionary.registerFormat({
3236
name: 'scssVariablesFormat',
3337
format: function ({ dictionary }) { // Use 'format' for Style Dictionary v3
3438
console.log('Generating SCSS variables...');
3539

36-
// Set the prefix for variables
37-
setVariablePrefixValue('token');
38-
3940
const primitiveProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'primitives');
4041
const scaleProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'scale');
4142
const borderProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'border');
@@ -90,9 +91,6 @@ StyleDictionary.registerFormat({
9091
format: function ({ dictionary }) { // Use 'format' for Style Dictionary v3
9192
console.log('Generating Utility-Classes...');
9293

93-
// Set the prefix for classes
94-
setClassesPrefixValue('ion');
95-
9694
// Arrays to store specific utility classes
9795
const typographyUtilityClasses = [];
9896
const otherUtilityClasses = [];

‎core/scripts/tokens/utils.mjs‎

Lines changed: 83 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
let variablesPrefix; // Variable that holds the prefix used on all css and scss variables generated
2-
let classPrefix; // Variable that holds the prefix used on all css utility-classes generated
1+
let variablesPrefix; // Variable that holds the prefix used on all css variables generated
2+
let classAndScssPrefix; // Variable that holds the prefix used on all css utility-classes and scss variables generated
33

44
// Set the variable prefix value
55
export function setVariablePrefixValue(prefix) {
66
variablesPrefix = prefix;
77
return variablesPrefix;
88
}
99

10-
export function setClassesPrefixValue(prefix) {
11-
classPrefix = prefix;
12-
return classPrefix;
10+
export function setClassesAndScssPrefixValue(prefix) {
11+
classAndScssPrefix = prefix;
12+
return classAndScssPrefix;
1313
}
1414

1515
// Generates a valid rgba() color
@@ -62,7 +62,7 @@ export function getAliasReferenceVariable(prop) {
6262
let ref = prop.$value.slice(1, -1).replace(/\./g, '-');
6363
// Remove consecutive repeated words (e.g., border-border-radius-0 → border-radius-0)
6464
ref = removeConsecutiveRepeatedWords(ref);
65-
return `$${variablesPrefix}-${ref}`;
65+
return `$${classAndScssPrefix}-${ref}`;
6666
}
6767
return null;
6868
}
@@ -75,13 +75,13 @@ export function generateShadowValue(prop, propName) {
7575
return `${shadow.x}px ${shadow.y}px ${shadow.blur}px ${shadow.spread}px ${color}`;
7676
}).join(', ');
7777

78-
return `$${variablesPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${cssShadow});`;
78+
return `$${classAndScssPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${cssShadow});`;
7979
}
8080

8181
// Generates a valid font-size value from a font-size Design Token structure, while transforming the pixels to rem
8282
export function generateFontSizeValue(prop, propName, variableType = 'css') {
8383
return variableType === 'scss'
84-
? `$${variablesPrefix}-${propName}: var(--${variablesPrefix}-${propName}, font.px-to-rem(${parseInt(
84+
? `$${classAndScssPrefix}-${propName}: var(--${variablesPrefix}-${propName}, font.px-to-rem(${parseInt(
8585
prop.$value
8686
)}));`
8787
: `--${propName}: #{font.px-to-rem(${parseInt(prop.$value)})};`;
@@ -93,7 +93,7 @@ export function generateFontFamilyValue(prop, propName, variableType = 'css') {
9393
const _propName = propName.split('-').slice(0, -1).join('-');
9494

9595
return variableType === 'scss'
96-
? `$${variablesPrefix}-${_propName}: var(--${variablesPrefix}-${_propName}, "${prop.$value}", sans-serif);`
96+
? `$${classAndScssPrefix}-${_propName}: var(--${variablesPrefix}-${_propName}, "${prop.$value}", sans-serif);`
9797
: `--${variablesPrefix}-${_propName}: "${prop.$value}", sans-serif;`;
9898
}
9999

@@ -105,16 +105,16 @@ export function generateValue(prop, propName) {
105105
// Always generate the main variable
106106
let mainValue;
107107
if (aliasVar) {
108-
mainValue = `$${variablesPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${aliasVar});`;
108+
mainValue = `$${classAndScssPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${aliasVar});`;
109109
} else {
110-
mainValue = `$${variablesPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${prop.$value});`;
110+
mainValue = `$${classAndScssPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${prop.$value});`;
111111
}
112112

113113
// Always generate the -rgb variable if it's a color
114114
const rgb = hexToRgb(prop.$value);
115115
let rgbDeclaration = '';
116116
if (rgb) {
117-
rgbDeclaration = `\n$${variablesPrefix}-${propName}-rgb: var(--${variablesPrefix}-${propName}-rgb, ${rgb.r}, ${rgb.g}, ${rgb.b});`;
117+
rgbDeclaration = `\n$${classAndScssPrefix}-${propName}-rgb: var(--${variablesPrefix}-${propName}-rgb, ${rgb.r}, ${rgb.g}, ${rgb.b});`;
118118
}
119119

120120
return `${mainValue}${rgbDeclaration}`;
@@ -123,7 +123,6 @@ export function generateValue(prop, propName) {
123123
// Generates a typography based css utility-class or scss variable from a typography token structure
124124
export function generateTypographyOutput(prop, propName, isVariable) {
125125
const typography = prop.original.$value;
126-
const outerPrefix = isVariable ? variablesPrefix : classPrefix;
127126

128127
// Extract the part after the last dot and trim any extraneous characters
129128
const extractLastPart = (str) => str.split('.').pop().replace(/[^\w-]/g, '');
@@ -135,12 +134,12 @@ export function generateTypographyOutput(prop, propName, isVariable) {
135134

136135
// This exact format is needed so that it compiles the tokens with the expected lint rules
137136
return `
138-
${_prefix}${outerPrefix}-${propName}${_initialWrapper}
139-
font-size: $${variablesPrefix}-font-size-${extractLastPart(typography.fontSize)}${_endChar}
137+
${_prefix}${classAndScssPrefix}-${propName}${_initialWrapper}
138+
font-size: $${classAndScssPrefix}-font-size-${extractLastPart(typography.fontSize)}${_endChar}
140139
font-style: ${prop.attributes.item?.toLowerCase() === 'italic' ? 'italic' : 'normal'}${_endChar}
141-
font-weight: $${variablesPrefix}-font-weight-${extractLastPart(typography.fontWeight)}${_endChar}
142-
letter-spacing: $${variablesPrefix}-font-letter-spacing-${extractLastPart(typography.letterSpacing) || 0}${_endChar}
143-
line-height: $${variablesPrefix}-font-line-height-${extractLastPart(typography.lineHeight)}${_endChar}
140+
font-weight: $${classAndScssPrefix}-font-weight-${extractLastPart(typography.fontWeight)}${_endChar}
141+
letter-spacing: $${classAndScssPrefix}-font-letter-spacing-${extractLastPart(typography.letterSpacing) || 0}${_endChar}
142+
line-height: $${classAndScssPrefix}-font-line-height-${extractLastPart(typography.lineHeight)}${_endChar}
144143
text-transform: ${typography.textCase}${_endChar}
145144
text-decoration: ${typography.textDecoration}${_endChar}
146145
${_endWrapper};
@@ -151,9 +150,9 @@ export function generateTypographyOutput(prop, propName, isVariable) {
151150
export function generateColorUtilityClasses(prop, className) {
152151
const isBg = className.includes('bg');
153152
const cssProp = isBg ? 'background-color' : 'color';
154-
return `.${classPrefix}-${className} {
155-
--${cssProp}: $${variablesPrefix}-${prop.name};
156-
${cssProp}: $${variablesPrefix}-${prop.name};
153+
return `.${classAndScssPrefix}-${className} {
154+
--${cssProp}: $${classAndScssPrefix}-${prop.name};
155+
${cssProp}: $${classAndScssPrefix}-${prop.name};
157156
}`;
158157
}
159158

@@ -164,60 +163,60 @@ export function generateDefaultSpaceUtilityClasses() {
164163
const defaultMarginPaddingToken = 'space-400';
165164

166165
const marginPaddingTemplate = (type) => `
167-
.${classPrefix}-no-${type} {
168-
--${type}-top: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
169-
--${type}-end: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
170-
--${type}-bottom: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
171-
--${type}-start: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
166+
.${classAndScssPrefix}-no-${type} {
167+
--${type}-top: #{$${classAndScssPrefix}-${zeroMarginPaddingToken}};
168+
--${type}-end: #{$${classAndScssPrefix}-${zeroMarginPaddingToken}};
169+
--${type}-bottom: #{$${classAndScssPrefix}-${zeroMarginPaddingToken}};
170+
--${type}-start: #{$${classAndScssPrefix}-${zeroMarginPaddingToken}};
172171
173-
@include ${type}($${variablesPrefix}-${zeroMarginPaddingToken});
172+
@include ${type}($${classAndScssPrefix}-${zeroMarginPaddingToken});
174173
};
175174
176-
.${classPrefix}-${type} {
177-
--${type}-top: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
178-
--${type}-end: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
179-
--${type}-bottom: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
180-
--${type}-start: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
175+
.${classAndScssPrefix}-${type} {
176+
--${type}-top: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
177+
--${type}-end: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
178+
--${type}-bottom: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
179+
--${type}-start: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
181180
182-
@include ${type}($${variablesPrefix}-${defaultMarginPaddingToken});
181+
@include ${type}($${classAndScssPrefix}-${defaultMarginPaddingToken});
183182
};
184183
185-
.${classPrefix}-${type}-top {
186-
--${type}-top: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
184+
.${classAndScssPrefix}-${type}-top {
185+
--${type}-top: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
187186
188-
@include ${type}($${variablesPrefix}-${defaultMarginPaddingToken}, null, null, null);
187+
@include ${type}($${classAndScssPrefix}-${defaultMarginPaddingToken}, null, null, null);
189188
};
190189
191-
.${classPrefix}-${type}-end {
192-
--${type}-end: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
190+
.${classAndScssPrefix}-${type}-end {
191+
--${type}-end: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
193192
194-
@include ${type}(null, $${variablesPrefix}-${defaultMarginPaddingToken}, null, null);
193+
@include ${type}(null, $${classAndScssPrefix}-${defaultMarginPaddingToken}, null, null);
195194
};
196195
197-
.${classPrefix}-${type}-bottom {
198-
--${type}-bottom: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
196+
.${classAndScssPrefix}-${type}-bottom {
197+
--${type}-bottom: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
199198
200-
@include ${type}(null, null, $${variablesPrefix}-${defaultMarginPaddingToken}, null);
199+
@include ${type}(null, null, $${classAndScssPrefix}-${defaultMarginPaddingToken}, null);
201200
};
202201
203-
.${classPrefix}-${type}-start {
204-
--${type}-start: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
202+
.${classAndScssPrefix}-${type}-start {
203+
--${type}-start: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
205204
206-
@include ${type}(null, null, null, $${variablesPrefix}-${defaultMarginPaddingToken});
205+
@include ${type}(null, null, null, $${classAndScssPrefix}-${defaultMarginPaddingToken});
207206
};
208207
209-
.${classPrefix}-${type}-vertical {
210-
--${type}-top: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
211-
--${type}-bottom: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
208+
.${classAndScssPrefix}-${type}-vertical {
209+
--${type}-top: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
210+
--${type}-bottom: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
212211
213-
@include ${type}($${variablesPrefix}-${defaultMarginPaddingToken}, null, $${variablesPrefix}-${defaultMarginPaddingToken}, null);
212+
@include ${type}($${classAndScssPrefix}-${defaultMarginPaddingToken}, null, $${classAndScssPrefix}-${defaultMarginPaddingToken}, null);
214213
};
215214
216-
.${classPrefix}-${type}-horizontal {
217-
--${type}-start: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
218-
--${type}-end: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
215+
.${classAndScssPrefix}-${type}-horizontal {
216+
--${type}-start: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
217+
--${type}-end: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
219218
220-
@include ${type}(null, $${variablesPrefix}-${defaultMarginPaddingToken}, null, $${variablesPrefix}-${defaultMarginPaddingToken});
219+
@include ${type}(null, $${classAndScssPrefix}-${defaultMarginPaddingToken}, null, $${classAndScssPrefix}-${defaultMarginPaddingToken});
221220
};
222221
`;
223222

@@ -229,44 +228,44 @@ export function generateSpaceUtilityClasses(prop, className) {
229228
// This exact format is needed so that it compiles the tokens with the expected lint rules
230229
// It will generate classes for margin and padding, for equal sizing on all side and each direction
231230
const marginPaddingTemplate = (type) => `
232-
.${classPrefix}-${type}-${className} {
233-
--${type}-top: #{$${variablesPrefix}-${prop.name}};
234-
--${type}-end: #{$${variablesPrefix}-${prop.name}};
235-
--${type}-bottom: #{$${variablesPrefix}-${prop.name}};
236-
--${type}-start: #{$${variablesPrefix}-${prop.name}};
231+
.${classAndScssPrefix}-${type}-${className} {
232+
--${type}-top: #{$${classAndScssPrefix}-${prop.name}};
233+
--${type}-end: #{$${classAndScssPrefix}-${prop.name}};
234+
--${type}-bottom: #{$${classAndScssPrefix}-${prop.name}};
235+
--${type}-start: #{$${classAndScssPrefix}-${prop.name}};
237236
238-
@include ${type}($${variablesPrefix}-${prop.name});
237+
@include ${type}($${classAndScssPrefix}-${prop.name});
239238
};
240239
241-
.${classPrefix}-${type}-top-${className} {
242-
--${type}-top: #{$${variablesPrefix}-${prop.name}};
240+
.${classAndScssPrefix}-${type}-top-${className} {
241+
--${type}-top: #{$${classAndScssPrefix}-${prop.name}};
243242
244-
@include ${type}($${variablesPrefix}-${prop.name}, null, null, null);
243+
@include ${type}($${classAndScssPrefix}-${prop.name}, null, null, null);
245244
};
246245
247-
.${classPrefix}-${type}-end-${className} {
248-
--${type}-end: #{$${variablesPrefix}-${prop.name}};
246+
.${classAndScssPrefix}-${type}-end-${className} {
247+
--${type}-end: #{$${classAndScssPrefix}-${prop.name}};
249248
250-
@include ${type}(null, $${variablesPrefix}-${prop.name}, null, null);
249+
@include ${type}(null, $${classAndScssPrefix}-${prop.name}, null, null);
251250
};
252251
253-
.${classPrefix}-${type}-bottom-${className} {
254-
--${type}-bottom: #{$${variablesPrefix}-${prop.name}};
252+
.${classAndScssPrefix}-${type}-bottom-${className} {
253+
--${type}-bottom: #{$${classAndScssPrefix}-${prop.name}};
255254
256-
@include ${type}(null, null, $${variablesPrefix}-${prop.name}, null);
255+
@include ${type}(null, null, $${classAndScssPrefix}-${prop.name}, null);
257256
};
258257
259-
.${classPrefix}-${type}-start-${className} {
260-
--${type}-start: #{$${variablesPrefix}-${prop.name}};
258+
.${classAndScssPrefix}-${type}-start-${className} {
259+
--${type}-start: #{$${classAndScssPrefix}-${prop.name}};
261260
262-
@include ${type}(null, null, null, $${variablesPrefix}-${prop.name});
261+
@include ${type}(null, null, null, $${classAndScssPrefix}-${prop.name});
263262
};
264263
`;
265264

266265
// Add gap utility classes for gap tokens
267266
const generateGapUtilityClasses = () =>`
268-
.${classPrefix}-gap-${prop.name} {
269-
gap: #{$${variablesPrefix}-${prop.name}};
267+
.${classAndScssPrefix}-gap-${prop.name} {
268+
gap: #{$${classAndScssPrefix}-${prop.name}};
270269
};
271270
`;
272271

@@ -275,9 +274,9 @@ export function generateSpaceUtilityClasses(prop, className) {
275274

276275
// Generates a valid box-shadow value from a shadow Design Token structure
277276
export function generateRadiusUtilityClasses(propName) {
278-
return `.${classPrefix}-${propName} {
279-
--border-radius: $${variablesPrefix}-${propName};
280-
border-radius: $${variablesPrefix}-${propName};
277+
return `.${classAndScssPrefix}-${propName} {
278+
--border-radius: $${classAndScssPrefix}-${propName};
279+
border-radius: $${classAndScssPrefix}-${propName};
281280
}`;
282281
}
283282

@@ -296,26 +295,26 @@ export function generateBorderUtilityClasses(prop, propName) {
296295
default:
297296
attribute = 'border-color';
298297
}
299-
return `.${classPrefix}-${propName} {
300-
--${attribute}: $${variablesPrefix}-${propName};
301-
${attribute}: $${variablesPrefix}-${propName};
298+
return `.${classAndScssPrefix}-${propName} {
299+
--${attribute}: $${classAndScssPrefix}-${propName};
300+
${attribute}: $${classAndScssPrefix}-${propName};
302301
}`;
303302
}
304303

305304
// Generates a font based css utility-class from a font Design Token structure
306305
export function generateFontUtilityClasses(prop, propName) {
307-
return `.${classPrefix}-${propName} {\n ${prop.attributes.type}: $${variablesPrefix}-${propName};\n}`;
306+
return `.${classAndScssPrefix}-${propName} {\n ${prop.attributes.type}: $${classAndScssPrefix}-${propName};\n}`;
308307
}
309308

310309
// Generates a valid box-shadow value from a shadow Design Token structure
311310
export function generateShadowUtilityClasses(propName) {
312-
return `.${classPrefix}-${propName} {
313-
--box-shadow: $${variablesPrefix}-${propName};
314-
box-shadow: $${variablesPrefix}-${propName};
311+
return `.${classAndScssPrefix}-${propName} {
312+
--box-shadow: $${classAndScssPrefix}-${propName};
313+
box-shadow: $${classAndScssPrefix}-${propName};
315314
}`;
316315
}
317316

318317
// Generates a utility class for a given token category and name
319318
export function generateUtilityClasses(tokenCategory, propName){
320-
return `.${classPrefix}-${propName} {\n ${tokenCategory}: $${variablesPrefix}-${propName};\n}`;
319+
return `.${classAndScssPrefix}-${propName} {\n ${tokenCategory}: $${classAndScssPrefix}-${propName};\n}`;
321320
}

0 commit comments

Comments
 (0)