@yahoo/uds 3.154.0 → 3.154.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.
- package/dist/automated-config/dist/generated/generatedConfigs.cjs +10 -0
- package/dist/automated-config/dist/generated/generatedConfigs.d.cts +10 -0
- package/dist/automated-config/dist/generated/generatedConfigs.d.ts +10 -0
- package/dist/automated-config/dist/generated/generatedConfigs.js +10 -0
- package/dist/automated-config/dist/generated/universalTokensConfigAuto.cjs +10 -0
- package/dist/automated-config/dist/generated/universalTokensConfigAuto.js +10 -0
- package/dist/automated-config/dist/properties.cjs +101 -87
- package/dist/automated-config/dist/properties.d.cts +2 -0
- package/dist/automated-config/dist/properties.d.ts +2 -0
- package/dist/automated-config/dist/properties.js +101 -87
- package/dist/automated-config/dist/types/ComponentConfig.d.cts +2 -0
- package/dist/automated-config/dist/types/ComponentConfig.d.ts +2 -0
- package/dist/automated-config/dist/utils/buildConfigSchema.cjs +18 -0
- package/dist/automated-config/dist/utils/buildConfigSchema.d.cts +5 -1
- package/dist/automated-config/dist/utils/buildConfigSchema.d.ts +5 -1
- package/dist/automated-config/dist/utils/buildConfigSchema.js +18 -0
- package/dist/automated-config/dist/utils/getConfigVariantProperties.d.cts +2 -2
- package/dist/automated-config/dist/utils/getConfigVariantProperties.d.ts +2 -2
- package/dist/automated-config/dist/utils/getPaginationControlWidthPx.cjs +68 -0
- package/dist/automated-config/dist/utils/getPaginationControlWidthPx.d.cts +49 -0
- package/dist/automated-config/dist/utils/getPaginationControlWidthPx.d.ts +49 -0
- package/dist/automated-config/dist/utils/getPaginationControlWidthPx.js +66 -0
- package/dist/automated-config/dist/utils/index.cjs +55 -17
- package/dist/automated-config/dist/utils/index.d.cts +2 -0
- package/dist/automated-config/dist/utils/index.d.ts +2 -0
- package/dist/automated-config/dist/utils/index.js +55 -17
- package/dist/config/dist/index.cjs +979 -969
- package/dist/config/dist/index.js +979 -969
- package/dist/css/dist/packages/automated-config/dist/properties.cjs +101 -87
- package/dist/css/dist/packages/automated-config/dist/properties.js +101 -87
- package/dist/css/dist/packages/config/dist/index.cjs +979 -969
- package/dist/css/dist/packages/config/dist/index.js +979 -969
- package/dist/index.cjs +3 -0
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/styles/styler.d.cts +9 -9
- package/dist/styles/styler.d.ts +9 -9
- package/dist/tailwind-internal/dist/packages/automated-config/dist/generated/generatedConfigs.cjs +10 -0
- package/dist/tailwind-internal/dist/packages/automated-config/dist/generated/generatedConfigs.js +10 -0
- package/dist/tailwind-internal/dist/packages/automated-config/dist/properties.cjs +101 -87
- package/dist/tailwind-internal/dist/packages/automated-config/dist/properties.js +101 -87
- package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/index.cjs +54 -17
- package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/index.js +54 -17
- package/dist/tailwind-internal/dist/packages/config/dist/index.cjs +979 -969
- package/dist/tailwind-internal/dist/packages/config/dist/index.js +979 -969
- package/dist/tailwind-internal/dist/utils/getShadowStyles.d.cts +2 -2
- package/dist/tailwind-internal/dist/utils/getShadowStyles.d.ts +2 -2
- package/dist/tokens/automation/index.cjs +3 -0
- package/dist/tokens/automation/index.d.cts +2 -1
- package/dist/tokens/automation/index.d.ts +2 -1
- package/dist/tokens/automation/index.js +2 -1
- package/dist/tokens/index.cjs +3 -0
- package/dist/tokens/index.d.cts +2 -1
- package/dist/tokens/index.d.ts +2 -1
- package/dist/tokens/index.js +2 -1
- package/dist/uds/generated/componentData.cjs +293 -293
- package/dist/uds/generated/componentData.js +293 -293
- package/dist/uds/generated/migrationSchemaVersion.cjs +1 -1
- package/dist/uds/generated/migrationSchemaVersion.js +1 -1
- package/generated/componentData.json +412 -412
- package/generated/migrationSchemaVersion.ts +1 -1
- package/package.json +1 -1
|
@@ -32661,6 +32661,16 @@ const PaginationConfig = {
|
|
|
32661
32661
|
"full"
|
|
32662
32662
|
]]
|
|
32663
32663
|
},
|
|
32664
|
+
paginationWidthVar: {
|
|
32665
|
+
defaults: {
|
|
32666
|
+
md: 32,
|
|
32667
|
+
sm: 28
|
|
32668
|
+
},
|
|
32669
|
+
label: "Control width",
|
|
32670
|
+
name: "paginationWidthVar",
|
|
32671
|
+
typeOfFixture: ["positiveIntegers"],
|
|
32672
|
+
values: []
|
|
32673
|
+
},
|
|
32664
32674
|
spacing: {
|
|
32665
32675
|
defaults: {
|
|
32666
32676
|
md: "2",
|
|
@@ -3508,6 +3508,16 @@ declare const PaginationConfig: {
|
|
|
3508
3508
|
readonly typeOfFixture: readonly ["borderRadii"];
|
|
3509
3509
|
readonly values: readonly [readonly ["none", "xs", "sm", "md", "lg", "xl", "full"]];
|
|
3510
3510
|
};
|
|
3511
|
+
readonly paginationWidthVar: {
|
|
3512
|
+
readonly defaults: {
|
|
3513
|
+
readonly md: 32;
|
|
3514
|
+
readonly sm: 28;
|
|
3515
|
+
};
|
|
3516
|
+
readonly label: "Control width";
|
|
3517
|
+
readonly name: "paginationWidthVar";
|
|
3518
|
+
readonly typeOfFixture: readonly ["positiveIntegers"];
|
|
3519
|
+
readonly values: readonly [];
|
|
3520
|
+
};
|
|
3511
3521
|
readonly spacing: {
|
|
3512
3522
|
readonly defaults: {
|
|
3513
3523
|
readonly md: "2";
|
|
@@ -3508,6 +3508,16 @@ declare const PaginationConfig: {
|
|
|
3508
3508
|
readonly typeOfFixture: readonly ["borderRadii"];
|
|
3509
3509
|
readonly values: readonly [readonly ["none", "xs", "sm", "md", "lg", "xl", "full"]];
|
|
3510
3510
|
};
|
|
3511
|
+
readonly paginationWidthVar: {
|
|
3512
|
+
readonly defaults: {
|
|
3513
|
+
readonly md: 32;
|
|
3514
|
+
readonly sm: 28;
|
|
3515
|
+
};
|
|
3516
|
+
readonly label: "Control width";
|
|
3517
|
+
readonly name: "paginationWidthVar";
|
|
3518
|
+
readonly typeOfFixture: readonly ["positiveIntegers"];
|
|
3519
|
+
readonly values: readonly [];
|
|
3520
|
+
};
|
|
3511
3521
|
readonly spacing: {
|
|
3512
3522
|
readonly defaults: {
|
|
3513
3523
|
readonly md: "2";
|
|
@@ -32661,6 +32661,16 @@ const PaginationConfig = {
|
|
|
32661
32661
|
"full"
|
|
32662
32662
|
]]
|
|
32663
32663
|
},
|
|
32664
|
+
paginationWidthVar: {
|
|
32665
|
+
defaults: {
|
|
32666
|
+
md: 32,
|
|
32667
|
+
sm: 28
|
|
32668
|
+
},
|
|
32669
|
+
label: "Control width",
|
|
32670
|
+
name: "paginationWidthVar",
|
|
32671
|
+
typeOfFixture: ["positiveIntegers"],
|
|
32672
|
+
values: []
|
|
32673
|
+
},
|
|
32664
32674
|
spacing: {
|
|
32665
32675
|
defaults: {
|
|
32666
32676
|
md: "2",
|
|
@@ -12109,6 +12109,11 @@ const defaultUniversalTokensConfigAuto = {
|
|
|
12109
12109
|
value: "full",
|
|
12110
12110
|
valueType: "alias"
|
|
12111
12111
|
} },
|
|
12112
|
+
paginationWidthVar: { rest: {
|
|
12113
|
+
type: "positiveIntegers",
|
|
12114
|
+
value: 32,
|
|
12115
|
+
valueType: "alias"
|
|
12116
|
+
} },
|
|
12112
12117
|
spacing: { rest: {
|
|
12113
12118
|
type: "spacingAliases",
|
|
12114
12119
|
value: "2",
|
|
@@ -12136,6 +12141,11 @@ const defaultUniversalTokensConfigAuto = {
|
|
|
12136
12141
|
value: "full",
|
|
12137
12142
|
valueType: "alias"
|
|
12138
12143
|
} },
|
|
12144
|
+
paginationWidthVar: { rest: {
|
|
12145
|
+
type: "positiveIntegers",
|
|
12146
|
+
value: 28,
|
|
12147
|
+
valueType: "alias"
|
|
12148
|
+
} },
|
|
12139
12149
|
spacing: { rest: {
|
|
12140
12150
|
type: "spacingAliases",
|
|
12141
12151
|
value: "1.5",
|
|
@@ -12109,6 +12109,11 @@ const defaultUniversalTokensConfigAuto = {
|
|
|
12109
12109
|
value: "full",
|
|
12110
12110
|
valueType: "alias"
|
|
12111
12111
|
} },
|
|
12112
|
+
paginationWidthVar: { rest: {
|
|
12113
|
+
type: "positiveIntegers",
|
|
12114
|
+
value: 32,
|
|
12115
|
+
valueType: "alias"
|
|
12116
|
+
} },
|
|
12112
12117
|
spacing: { rest: {
|
|
12113
12118
|
type: "spacingAliases",
|
|
12114
12119
|
value: "2",
|
|
@@ -12136,6 +12141,11 @@ const defaultUniversalTokensConfigAuto = {
|
|
|
12136
12141
|
value: "full",
|
|
12137
12142
|
valueType: "alias"
|
|
12138
12143
|
} },
|
|
12144
|
+
paginationWidthVar: { rest: {
|
|
12145
|
+
type: "positiveIntegers",
|
|
12146
|
+
value: 28,
|
|
12147
|
+
valueType: "alias"
|
|
12148
|
+
} },
|
|
12139
12149
|
spacing: { rest: {
|
|
12140
12150
|
type: "spacingAliases",
|
|
12141
12151
|
value: "1.5",
|
|
@@ -280,9 +280,7 @@ const height = {
|
|
|
280
280
|
const width = {
|
|
281
281
|
name: "width",
|
|
282
282
|
cssProperties: "width",
|
|
283
|
-
twThemePath: (_, value) => {
|
|
284
|
-
return `width[${value}]`;
|
|
285
|
-
},
|
|
283
|
+
twThemePath: (_, value) => `width[${value}]`,
|
|
286
284
|
possibleFixtures: ["spacingAliases"]
|
|
287
285
|
};
|
|
288
286
|
const shadow = {
|
|
@@ -346,6 +344,95 @@ const opacity = {
|
|
|
346
344
|
twThemePath: (_, value) => `opacity[${value}]`,
|
|
347
345
|
possibleFixtures: ["opacitySteps"]
|
|
348
346
|
};
|
|
347
|
+
const fillOpacity = {
|
|
348
|
+
name: "fillOpacity",
|
|
349
|
+
cssProperties: "fill-opacity",
|
|
350
|
+
twThemePath: (_, value) => `opacity[${value}]`,
|
|
351
|
+
possibleFixtures: ["opacitySteps"]
|
|
352
|
+
};
|
|
353
|
+
const iconSize = {
|
|
354
|
+
name: "iconSize",
|
|
355
|
+
cssProperties: ["width", "height"],
|
|
356
|
+
twThemePath: (_, value) => `sizing.icon.${value}`,
|
|
357
|
+
possibleFixtures: ["iconSizes"]
|
|
358
|
+
};
|
|
359
|
+
const scaleEffect = {
|
|
360
|
+
name: "scaleEffect",
|
|
361
|
+
cssProperties: require_index.BUTTON_SCALE_EFFECT,
|
|
362
|
+
possibleFixtures: ["scaleEffects"],
|
|
363
|
+
twThemePath: () => {
|
|
364
|
+
return ``;
|
|
365
|
+
},
|
|
366
|
+
customValueRenderer: (schemaValue) => {
|
|
367
|
+
const value = schemaValue.value;
|
|
368
|
+
return String(require_index$1.SCALE_EFFECTS[String(value)] ?? require_index$1.SCALE_EFFECTS.none);
|
|
369
|
+
}
|
|
370
|
+
};
|
|
371
|
+
const blurBackgroundColor = {
|
|
372
|
+
...backgroundColor,
|
|
373
|
+
name: "blurBackgroundColor",
|
|
374
|
+
cssProperties: `--${require_index.BACKGROUND_BLUR_COLOR_PREFIX}`
|
|
375
|
+
};
|
|
376
|
+
const backdropBlur = {
|
|
377
|
+
name: "backdropBlur",
|
|
378
|
+
possibleFixtures: ["positiveIntegers"],
|
|
379
|
+
cssProperties: "--uds-backdrop-blur",
|
|
380
|
+
twThemePath: () => {
|
|
381
|
+
return ``;
|
|
382
|
+
},
|
|
383
|
+
customValueRenderer: (schemaValue, schema, _theme, originalPropertyDefinition) => {
|
|
384
|
+
if (originalPropertyDefinition && originalPropertyDefinition.layerReference) {
|
|
385
|
+
const { variablePath, propertyName } = originalPropertyDefinition.layerReference;
|
|
386
|
+
const property = schema.variables[variablePath][propertyName].rest;
|
|
387
|
+
if (property.type === "elevationAliases") return `var(--uds-background-blur-radius-${property.value})`;
|
|
388
|
+
}
|
|
389
|
+
return schemaValue.value === 0 ? "none" : `blur(${schemaValue.value}px)`;
|
|
390
|
+
}
|
|
391
|
+
};
|
|
392
|
+
const blurBackgroundColorFallback = {
|
|
393
|
+
...backgroundColor,
|
|
394
|
+
name: "blurBackgroundColorFallback",
|
|
395
|
+
cssProperties: `--${require_index.BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX}`
|
|
396
|
+
};
|
|
397
|
+
const buttonSize = {
|
|
398
|
+
name: "buttonSize",
|
|
399
|
+
cssProperties: "--uds-button-size",
|
|
400
|
+
possibleFixtures: ["buttonSizes"],
|
|
401
|
+
twThemePath: () => {
|
|
402
|
+
return ``;
|
|
403
|
+
},
|
|
404
|
+
customValueRenderer: (schemaValue) => {
|
|
405
|
+
return String(schemaValue.value);
|
|
406
|
+
}
|
|
407
|
+
};
|
|
408
|
+
const buttonVariant = {
|
|
409
|
+
name: "buttonVariant",
|
|
410
|
+
cssProperties: "--uds-button-variant",
|
|
411
|
+
possibleFixtures: ["buttonVariantsFlat"],
|
|
412
|
+
twThemePath: () => {
|
|
413
|
+
return ``;
|
|
414
|
+
},
|
|
415
|
+
customValueRenderer: (schemaValue) => {
|
|
416
|
+
return String(schemaValue.value);
|
|
417
|
+
}
|
|
418
|
+
};
|
|
419
|
+
const iconVariant = {
|
|
420
|
+
name: "iconVariant",
|
|
421
|
+
cssProperties: "--uds-icon-variant",
|
|
422
|
+
possibleFixtures: ["iconVariants"],
|
|
423
|
+
twThemePath: () => {
|
|
424
|
+
return ``;
|
|
425
|
+
},
|
|
426
|
+
customValueRenderer: (schemaValue) => {
|
|
427
|
+
return String(schemaValue.value);
|
|
428
|
+
}
|
|
429
|
+
};
|
|
430
|
+
const paginationWidthVar = {
|
|
431
|
+
name: "paginationWidthVar",
|
|
432
|
+
cssProperties: "--uds-pagination-control-size",
|
|
433
|
+
possibleFixtures: ["positiveIntegers"],
|
|
434
|
+
twThemePath: (_, value) => `${value}px`
|
|
435
|
+
};
|
|
349
436
|
const publicProperties = {
|
|
350
437
|
backgroundColor,
|
|
351
438
|
borderWidth,
|
|
@@ -356,28 +443,8 @@ const publicProperties = {
|
|
|
356
443
|
borderColor,
|
|
357
444
|
underlineColor,
|
|
358
445
|
stroke,
|
|
359
|
-
buttonSize
|
|
360
|
-
|
|
361
|
-
cssProperties: "--uds-button-size",
|
|
362
|
-
possibleFixtures: ["buttonSizes"],
|
|
363
|
-
twThemePath: () => {
|
|
364
|
-
return ``;
|
|
365
|
-
},
|
|
366
|
-
customValueRenderer: (schemaValue) => {
|
|
367
|
-
return String(schemaValue.value);
|
|
368
|
-
}
|
|
369
|
-
},
|
|
370
|
-
buttonVariant: {
|
|
371
|
-
name: "buttonVariant",
|
|
372
|
-
cssProperties: "--uds-button-variant",
|
|
373
|
-
possibleFixtures: ["buttonVariantsFlat"],
|
|
374
|
-
twThemePath: () => {
|
|
375
|
-
return ``;
|
|
376
|
-
},
|
|
377
|
-
customValueRenderer: (schemaValue) => {
|
|
378
|
-
return String(schemaValue.value);
|
|
379
|
-
}
|
|
380
|
-
},
|
|
446
|
+
buttonSize,
|
|
447
|
+
buttonVariant,
|
|
381
448
|
fontFamily,
|
|
382
449
|
fontSize,
|
|
383
450
|
fontVariationSettings,
|
|
@@ -387,31 +454,11 @@ const publicProperties = {
|
|
|
387
454
|
gap,
|
|
388
455
|
color,
|
|
389
456
|
opacity,
|
|
390
|
-
fillOpacity
|
|
391
|
-
name: "fillOpacity",
|
|
392
|
-
cssProperties: "fill-opacity",
|
|
393
|
-
twThemePath: (_, value) => `opacity[${value}]`,
|
|
394
|
-
possibleFixtures: ["opacitySteps"]
|
|
395
|
-
},
|
|
457
|
+
fillOpacity,
|
|
396
458
|
fontWeight,
|
|
397
|
-
iconSize
|
|
398
|
-
name: "iconSize",
|
|
399
|
-
cssProperties: ["width", "height"],
|
|
400
|
-
twThemePath: (_, value) => `sizing.icon.${value}`,
|
|
401
|
-
possibleFixtures: ["iconSizes"]
|
|
402
|
-
},
|
|
459
|
+
iconSize,
|
|
403
460
|
spacing,
|
|
404
|
-
iconVariant
|
|
405
|
-
name: "iconVariant",
|
|
406
|
-
cssProperties: "--uds-icon-variant",
|
|
407
|
-
possibleFixtures: ["iconVariants"],
|
|
408
|
-
twThemePath: () => {
|
|
409
|
-
return ``;
|
|
410
|
-
},
|
|
411
|
-
customValueRenderer: (schemaValue) => {
|
|
412
|
-
return String(schemaValue.value);
|
|
413
|
-
}
|
|
414
|
-
},
|
|
461
|
+
iconVariant,
|
|
415
462
|
horizontalMargin,
|
|
416
463
|
bottomMargin,
|
|
417
464
|
spacingHorizontal,
|
|
@@ -453,44 +500,10 @@ const publicProperties = {
|
|
|
453
500
|
},
|
|
454
501
|
height,
|
|
455
502
|
width,
|
|
456
|
-
scaleEffect
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
twThemePath: () => {
|
|
461
|
-
return ``;
|
|
462
|
-
},
|
|
463
|
-
customValueRenderer: (schemaValue) => {
|
|
464
|
-
const value = schemaValue.value;
|
|
465
|
-
return String(require_index$1.SCALE_EFFECTS[String(value)] ?? require_index$1.SCALE_EFFECTS.none);
|
|
466
|
-
}
|
|
467
|
-
},
|
|
468
|
-
backdropBlur: {
|
|
469
|
-
name: "backdropBlur",
|
|
470
|
-
possibleFixtures: ["positiveIntegers"],
|
|
471
|
-
cssProperties: "--uds-backdrop-blur",
|
|
472
|
-
twThemePath: () => {
|
|
473
|
-
return ``;
|
|
474
|
-
},
|
|
475
|
-
customValueRenderer: (schemaValue, schema, _theme, originalPropertyDefinition) => {
|
|
476
|
-
if (originalPropertyDefinition && originalPropertyDefinition.layerReference) {
|
|
477
|
-
const { variablePath, propertyName } = originalPropertyDefinition.layerReference;
|
|
478
|
-
const property = schema.variables[variablePath][propertyName].rest;
|
|
479
|
-
if (property.type === "elevationAliases") return `var(--uds-background-blur-radius-${property.value})`;
|
|
480
|
-
}
|
|
481
|
-
return schemaValue.value === 0 ? "none" : `blur(${schemaValue.value}px)`;
|
|
482
|
-
}
|
|
483
|
-
},
|
|
484
|
-
blurBackgroundColor: {
|
|
485
|
-
...backgroundColor,
|
|
486
|
-
name: "blurBackgroundColor",
|
|
487
|
-
cssProperties: `--${require_index.BACKGROUND_BLUR_COLOR_PREFIX}`
|
|
488
|
-
},
|
|
489
|
-
blurBackgroundColorFallback: {
|
|
490
|
-
...backgroundColor,
|
|
491
|
-
name: "blurBackgroundColorFallback",
|
|
492
|
-
cssProperties: `--${require_index.BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX}`
|
|
493
|
-
},
|
|
503
|
+
scaleEffect,
|
|
504
|
+
backdropBlur,
|
|
505
|
+
blurBackgroundColor,
|
|
506
|
+
blurBackgroundColorFallback,
|
|
494
507
|
scrimBackgroundColor: {
|
|
495
508
|
name: "scrimBackgroundColor",
|
|
496
509
|
cssProperties: "--uds-scrim-background-color",
|
|
@@ -515,7 +528,8 @@ const publicProperties = {
|
|
|
515
528
|
cssProperties: "--uds-scrim-opacity",
|
|
516
529
|
twThemePath: () => "",
|
|
517
530
|
customValueRenderer: ({ value }) => `${String(value)}%`
|
|
518
|
-
}
|
|
531
|
+
},
|
|
532
|
+
paginationWidthVar
|
|
519
533
|
};
|
|
520
534
|
const internalProperties = {
|
|
521
535
|
outlineWidth,
|
|
@@ -68,6 +68,7 @@ declare const publicProperties: {
|
|
|
68
68
|
readonly blurBackgroundColorFallback: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases", unknown>;
|
|
69
69
|
readonly scrimBackgroundColor: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases", unknown>;
|
|
70
70
|
readonly scrimOpacity: ConfigurableProperty<"opacitySteps", unknown>;
|
|
71
|
+
readonly paginationWidthVar: ConfigurableProperty<"positiveIntegers", unknown>;
|
|
71
72
|
};
|
|
72
73
|
declare const configurableProperties: {
|
|
73
74
|
outlineWidth: ConfigurableProperty<"borderWidths" | "spacingAliases", unknown>;
|
|
@@ -119,6 +120,7 @@ declare const configurableProperties: {
|
|
|
119
120
|
blurBackgroundColorFallback: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases", unknown>;
|
|
120
121
|
scrimBackgroundColor: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases", unknown>;
|
|
121
122
|
scrimOpacity: ConfigurableProperty<"opacitySteps", unknown>;
|
|
123
|
+
paginationWidthVar: ConfigurableProperty<"positiveIntegers", unknown>;
|
|
122
124
|
};
|
|
123
125
|
type ExtendablePropertiesName = keyof typeof configurableProperties;
|
|
124
126
|
type ConfigurablePropertiesName = keyof typeof publicProperties;
|
|
@@ -68,6 +68,7 @@ declare const publicProperties: {
|
|
|
68
68
|
readonly blurBackgroundColorFallback: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases", unknown>;
|
|
69
69
|
readonly scrimBackgroundColor: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases", unknown>;
|
|
70
70
|
readonly scrimOpacity: ConfigurableProperty<"opacitySteps", unknown>;
|
|
71
|
+
readonly paginationWidthVar: ConfigurableProperty<"positiveIntegers", unknown>;
|
|
71
72
|
};
|
|
72
73
|
declare const configurableProperties: {
|
|
73
74
|
outlineWidth: ConfigurableProperty<"borderWidths" | "spacingAliases", unknown>;
|
|
@@ -119,6 +120,7 @@ declare const configurableProperties: {
|
|
|
119
120
|
blurBackgroundColorFallback: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases", unknown>;
|
|
120
121
|
scrimBackgroundColor: ConfigurableProperty<"backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases", unknown>;
|
|
121
122
|
scrimOpacity: ConfigurableProperty<"opacitySteps", unknown>;
|
|
123
|
+
paginationWidthVar: ConfigurableProperty<"positiveIntegers", unknown>;
|
|
122
124
|
};
|
|
123
125
|
type ExtendablePropertiesName = keyof typeof configurableProperties;
|
|
124
126
|
type ConfigurablePropertiesName = keyof typeof publicProperties;
|
|
@@ -280,9 +280,7 @@ const height = {
|
|
|
280
280
|
const width = {
|
|
281
281
|
name: "width",
|
|
282
282
|
cssProperties: "width",
|
|
283
|
-
twThemePath: (_, value) => {
|
|
284
|
-
return `width[${value}]`;
|
|
285
|
-
},
|
|
283
|
+
twThemePath: (_, value) => `width[${value}]`,
|
|
286
284
|
possibleFixtures: ["spacingAliases"]
|
|
287
285
|
};
|
|
288
286
|
const shadow = {
|
|
@@ -346,6 +344,95 @@ const opacity = {
|
|
|
346
344
|
twThemePath: (_, value) => `opacity[${value}]`,
|
|
347
345
|
possibleFixtures: ["opacitySteps"]
|
|
348
346
|
};
|
|
347
|
+
const fillOpacity = {
|
|
348
|
+
name: "fillOpacity",
|
|
349
|
+
cssProperties: "fill-opacity",
|
|
350
|
+
twThemePath: (_, value) => `opacity[${value}]`,
|
|
351
|
+
possibleFixtures: ["opacitySteps"]
|
|
352
|
+
};
|
|
353
|
+
const iconSize = {
|
|
354
|
+
name: "iconSize",
|
|
355
|
+
cssProperties: ["width", "height"],
|
|
356
|
+
twThemePath: (_, value) => `sizing.icon.${value}`,
|
|
357
|
+
possibleFixtures: ["iconSizes"]
|
|
358
|
+
};
|
|
359
|
+
const scaleEffect = {
|
|
360
|
+
name: "scaleEffect",
|
|
361
|
+
cssProperties: BUTTON_SCALE_EFFECT,
|
|
362
|
+
possibleFixtures: ["scaleEffects"],
|
|
363
|
+
twThemePath: () => {
|
|
364
|
+
return ``;
|
|
365
|
+
},
|
|
366
|
+
customValueRenderer: (schemaValue) => {
|
|
367
|
+
const value = schemaValue.value;
|
|
368
|
+
return String(SCALE_EFFECTS[String(value)] ?? SCALE_EFFECTS.none);
|
|
369
|
+
}
|
|
370
|
+
};
|
|
371
|
+
const blurBackgroundColor = {
|
|
372
|
+
...backgroundColor,
|
|
373
|
+
name: "blurBackgroundColor",
|
|
374
|
+
cssProperties: `--${BACKGROUND_BLUR_COLOR_PREFIX}`
|
|
375
|
+
};
|
|
376
|
+
const backdropBlur = {
|
|
377
|
+
name: "backdropBlur",
|
|
378
|
+
possibleFixtures: ["positiveIntegers"],
|
|
379
|
+
cssProperties: "--uds-backdrop-blur",
|
|
380
|
+
twThemePath: () => {
|
|
381
|
+
return ``;
|
|
382
|
+
},
|
|
383
|
+
customValueRenderer: (schemaValue, schema, _theme, originalPropertyDefinition) => {
|
|
384
|
+
if (originalPropertyDefinition && originalPropertyDefinition.layerReference) {
|
|
385
|
+
const { variablePath, propertyName } = originalPropertyDefinition.layerReference;
|
|
386
|
+
const property = schema.variables[variablePath][propertyName].rest;
|
|
387
|
+
if (property.type === "elevationAliases") return `var(--uds-background-blur-radius-${property.value})`;
|
|
388
|
+
}
|
|
389
|
+
return schemaValue.value === 0 ? "none" : `blur(${schemaValue.value}px)`;
|
|
390
|
+
}
|
|
391
|
+
};
|
|
392
|
+
const blurBackgroundColorFallback = {
|
|
393
|
+
...backgroundColor,
|
|
394
|
+
name: "blurBackgroundColorFallback",
|
|
395
|
+
cssProperties: `--${BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX}`
|
|
396
|
+
};
|
|
397
|
+
const buttonSize = {
|
|
398
|
+
name: "buttonSize",
|
|
399
|
+
cssProperties: "--uds-button-size",
|
|
400
|
+
possibleFixtures: ["buttonSizes"],
|
|
401
|
+
twThemePath: () => {
|
|
402
|
+
return ``;
|
|
403
|
+
},
|
|
404
|
+
customValueRenderer: (schemaValue) => {
|
|
405
|
+
return String(schemaValue.value);
|
|
406
|
+
}
|
|
407
|
+
};
|
|
408
|
+
const buttonVariant = {
|
|
409
|
+
name: "buttonVariant",
|
|
410
|
+
cssProperties: "--uds-button-variant",
|
|
411
|
+
possibleFixtures: ["buttonVariantsFlat"],
|
|
412
|
+
twThemePath: () => {
|
|
413
|
+
return ``;
|
|
414
|
+
},
|
|
415
|
+
customValueRenderer: (schemaValue) => {
|
|
416
|
+
return String(schemaValue.value);
|
|
417
|
+
}
|
|
418
|
+
};
|
|
419
|
+
const iconVariant = {
|
|
420
|
+
name: "iconVariant",
|
|
421
|
+
cssProperties: "--uds-icon-variant",
|
|
422
|
+
possibleFixtures: ["iconVariants"],
|
|
423
|
+
twThemePath: () => {
|
|
424
|
+
return ``;
|
|
425
|
+
},
|
|
426
|
+
customValueRenderer: (schemaValue) => {
|
|
427
|
+
return String(schemaValue.value);
|
|
428
|
+
}
|
|
429
|
+
};
|
|
430
|
+
const paginationWidthVar = {
|
|
431
|
+
name: "paginationWidthVar",
|
|
432
|
+
cssProperties: "--uds-pagination-control-size",
|
|
433
|
+
possibleFixtures: ["positiveIntegers"],
|
|
434
|
+
twThemePath: (_, value) => `${value}px`
|
|
435
|
+
};
|
|
349
436
|
const publicProperties = {
|
|
350
437
|
backgroundColor,
|
|
351
438
|
borderWidth,
|
|
@@ -356,28 +443,8 @@ const publicProperties = {
|
|
|
356
443
|
borderColor,
|
|
357
444
|
underlineColor,
|
|
358
445
|
stroke,
|
|
359
|
-
buttonSize
|
|
360
|
-
|
|
361
|
-
cssProperties: "--uds-button-size",
|
|
362
|
-
possibleFixtures: ["buttonSizes"],
|
|
363
|
-
twThemePath: () => {
|
|
364
|
-
return ``;
|
|
365
|
-
},
|
|
366
|
-
customValueRenderer: (schemaValue) => {
|
|
367
|
-
return String(schemaValue.value);
|
|
368
|
-
}
|
|
369
|
-
},
|
|
370
|
-
buttonVariant: {
|
|
371
|
-
name: "buttonVariant",
|
|
372
|
-
cssProperties: "--uds-button-variant",
|
|
373
|
-
possibleFixtures: ["buttonVariantsFlat"],
|
|
374
|
-
twThemePath: () => {
|
|
375
|
-
return ``;
|
|
376
|
-
},
|
|
377
|
-
customValueRenderer: (schemaValue) => {
|
|
378
|
-
return String(schemaValue.value);
|
|
379
|
-
}
|
|
380
|
-
},
|
|
446
|
+
buttonSize,
|
|
447
|
+
buttonVariant,
|
|
381
448
|
fontFamily,
|
|
382
449
|
fontSize,
|
|
383
450
|
fontVariationSettings,
|
|
@@ -387,31 +454,11 @@ const publicProperties = {
|
|
|
387
454
|
gap,
|
|
388
455
|
color,
|
|
389
456
|
opacity,
|
|
390
|
-
fillOpacity
|
|
391
|
-
name: "fillOpacity",
|
|
392
|
-
cssProperties: "fill-opacity",
|
|
393
|
-
twThemePath: (_, value) => `opacity[${value}]`,
|
|
394
|
-
possibleFixtures: ["opacitySteps"]
|
|
395
|
-
},
|
|
457
|
+
fillOpacity,
|
|
396
458
|
fontWeight,
|
|
397
|
-
iconSize
|
|
398
|
-
name: "iconSize",
|
|
399
|
-
cssProperties: ["width", "height"],
|
|
400
|
-
twThemePath: (_, value) => `sizing.icon.${value}`,
|
|
401
|
-
possibleFixtures: ["iconSizes"]
|
|
402
|
-
},
|
|
459
|
+
iconSize,
|
|
403
460
|
spacing,
|
|
404
|
-
iconVariant
|
|
405
|
-
name: "iconVariant",
|
|
406
|
-
cssProperties: "--uds-icon-variant",
|
|
407
|
-
possibleFixtures: ["iconVariants"],
|
|
408
|
-
twThemePath: () => {
|
|
409
|
-
return ``;
|
|
410
|
-
},
|
|
411
|
-
customValueRenderer: (schemaValue) => {
|
|
412
|
-
return String(schemaValue.value);
|
|
413
|
-
}
|
|
414
|
-
},
|
|
461
|
+
iconVariant,
|
|
415
462
|
horizontalMargin,
|
|
416
463
|
bottomMargin,
|
|
417
464
|
spacingHorizontal,
|
|
@@ -453,44 +500,10 @@ const publicProperties = {
|
|
|
453
500
|
},
|
|
454
501
|
height,
|
|
455
502
|
width,
|
|
456
|
-
scaleEffect
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
twThemePath: () => {
|
|
461
|
-
return ``;
|
|
462
|
-
},
|
|
463
|
-
customValueRenderer: (schemaValue) => {
|
|
464
|
-
const value = schemaValue.value;
|
|
465
|
-
return String(SCALE_EFFECTS[String(value)] ?? SCALE_EFFECTS.none);
|
|
466
|
-
}
|
|
467
|
-
},
|
|
468
|
-
backdropBlur: {
|
|
469
|
-
name: "backdropBlur",
|
|
470
|
-
possibleFixtures: ["positiveIntegers"],
|
|
471
|
-
cssProperties: "--uds-backdrop-blur",
|
|
472
|
-
twThemePath: () => {
|
|
473
|
-
return ``;
|
|
474
|
-
},
|
|
475
|
-
customValueRenderer: (schemaValue, schema, _theme, originalPropertyDefinition) => {
|
|
476
|
-
if (originalPropertyDefinition && originalPropertyDefinition.layerReference) {
|
|
477
|
-
const { variablePath, propertyName } = originalPropertyDefinition.layerReference;
|
|
478
|
-
const property = schema.variables[variablePath][propertyName].rest;
|
|
479
|
-
if (property.type === "elevationAliases") return `var(--uds-background-blur-radius-${property.value})`;
|
|
480
|
-
}
|
|
481
|
-
return schemaValue.value === 0 ? "none" : `blur(${schemaValue.value}px)`;
|
|
482
|
-
}
|
|
483
|
-
},
|
|
484
|
-
blurBackgroundColor: {
|
|
485
|
-
...backgroundColor,
|
|
486
|
-
name: "blurBackgroundColor",
|
|
487
|
-
cssProperties: `--${BACKGROUND_BLUR_COLOR_PREFIX}`
|
|
488
|
-
},
|
|
489
|
-
blurBackgroundColorFallback: {
|
|
490
|
-
...backgroundColor,
|
|
491
|
-
name: "blurBackgroundColorFallback",
|
|
492
|
-
cssProperties: `--${BACKGROUND_BLUR_FALLBACK_COLOR_PREFIX}`
|
|
493
|
-
},
|
|
503
|
+
scaleEffect,
|
|
504
|
+
backdropBlur,
|
|
505
|
+
blurBackgroundColor,
|
|
506
|
+
blurBackgroundColorFallback,
|
|
494
507
|
scrimBackgroundColor: {
|
|
495
508
|
name: "scrimBackgroundColor",
|
|
496
509
|
cssProperties: "--uds-scrim-background-color",
|
|
@@ -515,7 +528,8 @@ const publicProperties = {
|
|
|
515
528
|
cssProperties: "--uds-scrim-opacity",
|
|
516
529
|
twThemePath: () => "",
|
|
517
530
|
customValueRenderer: ({ value }) => `${String(value)}%`
|
|
518
|
-
}
|
|
531
|
+
},
|
|
532
|
+
paginationWidthVar
|
|
519
533
|
};
|
|
520
534
|
const internalProperties = {
|
|
521
535
|
outlineWidth,
|
|
@@ -44,6 +44,8 @@ interface VariantConfigWithProperties<O extends string = string> extends Variant
|
|
|
44
44
|
layers: {
|
|
45
45
|
root: LayerConfig;
|
|
46
46
|
} & Record<string, LayerConfig>;
|
|
47
|
+
/** Properties scoped to the variant option (e.g. size/sm/width without a layer). */
|
|
48
|
+
variantProperties?: Readonly<Record<string, SelectedConfigurableProperty<ConfigurablePropertiesName, string>>>;
|
|
47
49
|
}
|
|
48
50
|
/** Variant with component state definitions (hover, focus, etc.) for each option */
|
|
49
51
|
interface VariantConfigWithComponentStates<O extends string = string> extends VariantConfig<O> {
|
|
@@ -44,6 +44,8 @@ interface VariantConfigWithProperties<O extends string = string> extends Variant
|
|
|
44
44
|
layers: {
|
|
45
45
|
root: LayerConfig;
|
|
46
46
|
} & Record<string, LayerConfig>;
|
|
47
|
+
/** Properties scoped to the variant option (e.g. size/sm/width without a layer). */
|
|
48
|
+
variantProperties?: Readonly<Record<string, SelectedConfigurableProperty<ConfigurablePropertiesName, string>>>;
|
|
47
49
|
}
|
|
48
50
|
/** Variant with component state definitions (hover, focus, etc.) for each option */
|
|
49
51
|
interface VariantConfigWithComponentStates<O extends string = string> extends VariantConfig<O> {
|
|
@@ -65,6 +65,24 @@ function buildConfigSchema(config) {
|
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
67
|
} else if (require_variantConfigGuards.isVariantConfigWithProperties(variantConfig)) {
|
|
68
|
+
if (variantConfig.variantProperties) {
|
|
69
|
+
const variantSchemaKey = `${variantKey}/${variantOption}`;
|
|
70
|
+
result.variables[variantSchemaKey] = result.variables[variantSchemaKey] ?? {};
|
|
71
|
+
for (const propertyKey in variantConfig.variantProperties) {
|
|
72
|
+
const property = variantConfig.variantProperties[propertyKey];
|
|
73
|
+
const variableObject = { [propertyKey]: {} };
|
|
74
|
+
if (property?.skipRestState !== true) variableObject[propertyKey] = { rest: {
|
|
75
|
+
type: findFixtureType(property, variantOption),
|
|
76
|
+
valueType: "alias",
|
|
77
|
+
value: property.defaults[variantOption]
|
|
78
|
+
} };
|
|
79
|
+
appendPseudoStateVariables(variableObject, propertyKey, property, variantOption);
|
|
80
|
+
result.variables[variantSchemaKey] = {
|
|
81
|
+
...result.variables[variantSchemaKey],
|
|
82
|
+
...variableObject
|
|
83
|
+
};
|
|
84
|
+
}
|
|
85
|
+
}
|
|
68
86
|
const layers = variantConfig.layers;
|
|
69
87
|
for (const layerKey in layers) {
|
|
70
88
|
const layer = layers[layerKey];
|
|
@@ -40,8 +40,12 @@ type InferredLayerPropertiesForOption<Layer, ExcludedPseudoStates extends readon
|
|
|
40
40
|
} ? { [PropKey in keyof Props]: InferredPropertyStatesForOption<Props[PropKey], ExcludedPseudoStates> } : {} : {};
|
|
41
41
|
/** Generates schema key → properties mappings for a variant's layers or component states */
|
|
42
42
|
type InferredSchemaMap<VarKey extends string, VarConfig extends VariantConfig, LayersOrStates extends NonNullable<VariantConfigWithComponentStates['componentStates']> | NonNullable<VariantConfigWithProperties['layers']>, Prefix extends string = ''> = LayersOrStates extends NonNullable<VariantConfigWithComponentStates['componentStates']> ? UnionToIntersection<{ [StateKey in keyof OmitIndexSignature<LayersOrStates>]: UnionToIntersection<{ [StateOption in LayersOrStates[StateKey]['options'][number]]: { [LayerKey in keyof OmitIndexSignature<LayersOrStates[StateKey]['layers']> as `${Prefix}${VarKey}/${VarConfig['options'][number]}/${StateKey & string}/${StateOption}/${LayerKey & string}`]: InferredLayerPropertiesForOption<LayersOrStates[StateKey]['layers'][LayerKey], GetExcludedPseudoStatesForOption<LayersOrStates[StateKey], StateOption>> } }[LayersOrStates[StateKey]['options'][number]]> }[keyof OmitIndexSignature<LayersOrStates>]> : { [LayerKey in keyof OmitIndexSignature<LayersOrStates> as `${Prefix}${VarKey}/${VarConfig['options'][number]}/${LayerKey & string}`]: InferredLayerProperties<LayersOrStates[LayerKey]> };
|
|
43
|
+
type InferredVariantLevelProperties<Props extends Record<string, SelectedConfigurableProperty<ConfigurablePropertiesName, string>>> = { [PropKey in keyof Props]: InferredPropertyStates<Props[PropKey]> };
|
|
44
|
+
type InferredVariantPropertiesMap<VarKey extends string, VarConfig extends VariantConfigWithProperties, Prefix extends string = ''> = VarConfig extends {
|
|
45
|
+
variantProperties: infer Props extends Record<string, SelectedConfigurableProperty<ConfigurablePropertiesName, string>>;
|
|
46
|
+
} ? { [Option in VarConfig['options'][number] as `${Prefix}${VarKey}/${Option}`]: InferredVariantLevelProperties<Props> } : {};
|
|
43
47
|
/** Routes to appropriate schema map generator based on variant configuration type */
|
|
44
|
-
type InferredVariablesFilter<VarKey extends string, VarConfig extends VariantConfig, Prefix extends string = ''> = VarConfig extends VariantConfigWithComponentStates ? InferredSchemaMap<VarKey, VarConfig, VarConfig['componentStates'], Prefix> : VarConfig extends VariantConfigWithProperties ? InferredSchemaMap<VarKey, VarConfig, VarConfig['layers'], Prefix> : {};
|
|
48
|
+
type InferredVariablesFilter<VarKey extends string, VarConfig extends VariantConfig, Prefix extends string = ''> = VarConfig extends VariantConfigWithComponentStates ? InferredSchemaMap<VarKey, VarConfig, VarConfig['componentStates'], Prefix> : VarConfig extends VariantConfigWithProperties ? InferredSchemaMap<VarKey, VarConfig, VarConfig['layers'], Prefix> & InferredVariantPropertiesMap<VarKey, VarConfig, Prefix> : {};
|
|
45
49
|
/** Collects all schema mappings from component variants and subComponents */
|
|
46
50
|
type InferredVariables<C extends ComponentConfig> = (C['variants'] extends NonNullable<ComponentConfig['variants']> ? UnionToIntersection<{ [VarKey in keyof C['variants']]: InferredVariablesFilter<VarKey & string, C['variants'][VarKey]> }[keyof C['variants']]> : {}) & (C['subComponents'] extends NonNullable<ComponentConfig['subComponents']> ? UnionToIntersection<{ [SubCompKey in keyof C['subComponents']]: UnionToIntersection<{ [VarKey in keyof C['subComponents'][SubCompKey]['variants']]: InferredVariablesFilter<VarKey & string, C['subComponents'][SubCompKey]['variants'][VarKey], `${SubCompKey & string}/`> }[keyof C['subComponents'][SubCompKey]['variants']]> }[keyof C['subComponents']]> : {});
|
|
47
51
|
/** Component schema with inferred defaults and variable schema mappings */
|