@yahoo/uds 3.156.2 → 3.157.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/autoVariants.cjs +9 -4
- package/dist/automated-config/dist/generated/autoVariants.d.cts +2 -1
- package/dist/automated-config/dist/generated/autoVariants.d.ts +2 -1
- package/dist/automated-config/dist/generated/autoVariants.js +9 -4
- package/dist/automated-config/dist/generated/generatedConfigs.cjs +3078 -3089
- package/dist/automated-config/dist/generated/generatedConfigs.d.cts +158 -141
- package/dist/automated-config/dist/generated/generatedConfigs.d.ts +158 -141
- package/dist/automated-config/dist/generated/generatedConfigs.js +3078 -3089
- package/dist/automated-config/dist/generated/universalTokensConfigAuto.cjs +1217 -491
- package/dist/automated-config/dist/generated/universalTokensConfigAuto.d.cts +4 -1
- package/dist/automated-config/dist/generated/universalTokensConfigAuto.d.ts +4 -1
- package/dist/automated-config/dist/generated/universalTokensConfigAuto.js +1217 -491
- package/dist/automated-config/dist/properties.cjs +9 -2
- package/dist/automated-config/dist/properties.d.cts +23 -0
- package/dist/automated-config/dist/properties.d.ts +23 -0
- package/dist/automated-config/dist/properties.js +9 -2
- package/dist/automated-config/dist/types/ComponentConfig.d.cts +77 -4
- package/dist/automated-config/dist/types/ComponentConfig.d.ts +77 -4
- package/dist/automated-config/dist/types/ConfigSchema.d.cts +14 -2
- package/dist/automated-config/dist/types/ConfigSchema.d.ts +14 -2
- package/dist/automated-config/dist/types/StateAxis.cjs +90 -0
- package/dist/automated-config/dist/types/StateAxis.d.cts +70 -0
- package/dist/automated-config/dist/types/StateAxis.d.ts +70 -0
- package/dist/automated-config/dist/types/StateAxis.js +84 -0
- package/dist/automated-config/dist/utils/buildConfigSchema.cjs +105 -82
- package/dist/automated-config/dist/utils/buildConfigSchema.d.cts +41 -12
- package/dist/automated-config/dist/utils/buildConfigSchema.d.ts +41 -12
- package/dist/automated-config/dist/utils/buildConfigSchema.js +106 -83
- package/dist/automated-config/dist/utils/canonicalizeStateKey.cjs +32 -0
- package/dist/automated-config/dist/utils/canonicalizeStateKey.d.cts +48 -0
- package/dist/automated-config/dist/utils/canonicalizeStateKey.d.ts +48 -0
- package/dist/automated-config/dist/utils/canonicalizeStateKey.js +31 -0
- package/dist/automated-config/dist/utils/getButtonControlHeight.cjs +129 -0
- package/dist/automated-config/dist/utils/getButtonControlHeight.d.cts +133 -0
- package/dist/automated-config/dist/utils/getButtonControlHeight.d.ts +133 -0
- package/dist/automated-config/dist/utils/getButtonControlHeight.js +122 -0
- package/dist/automated-config/dist/utils/getButtonControlHeightPx.cjs +114 -0
- package/dist/automated-config/dist/utils/getButtonControlHeightPx.d.cts +78 -0
- package/dist/automated-config/dist/utils/getButtonControlHeightPx.d.ts +78 -0
- package/dist/automated-config/dist/utils/getButtonControlHeightPx.js +108 -0
- package/dist/automated-config/dist/utils/getConfigComponentVariant.d.cts +8 -0
- package/dist/automated-config/dist/utils/getConfigComponentVariant.d.ts +8 -0
- package/dist/automated-config/dist/utils/getConfigVariantProperties.d.cts +3 -3
- package/dist/automated-config/dist/utils/getConfigVariantProperties.d.ts +3 -3
- package/dist/automated-config/dist/utils/getConfigVariantPseudoStates.cjs +12 -5
- package/dist/automated-config/dist/utils/getConfigVariantPseudoStates.d.cts +8 -1
- package/dist/automated-config/dist/utils/getConfigVariantPseudoStates.d.ts +8 -1
- package/dist/automated-config/dist/utils/getConfigVariantPseudoStates.js +12 -5
- package/dist/automated-config/dist/utils/iconButtonMatchButtonHeight.cjs +110 -0
- package/dist/automated-config/dist/utils/iconButtonMatchButtonHeight.d.cts +19 -0
- package/dist/automated-config/dist/utils/iconButtonMatchButtonHeight.d.ts +19 -0
- package/dist/automated-config/dist/utils/iconButtonMatchButtonHeight.js +108 -0
- package/dist/automated-config/dist/utils/index.cjs +478 -111
- package/dist/automated-config/dist/utils/index.d.cts +76 -15
- package/dist/automated-config/dist/utils/index.d.ts +76 -15
- package/dist/automated-config/dist/utils/index.js +479 -113
- package/dist/automated-config/dist/utils/isConfiguratorPropertyVisible.cjs +15 -0
- package/dist/automated-config/dist/utils/isConfiguratorPropertyVisible.d.cts +20 -0
- package/dist/automated-config/dist/utils/isConfiguratorPropertyVisible.d.ts +20 -0
- package/dist/automated-config/dist/utils/isConfiguratorPropertyVisible.js +15 -0
- package/dist/automated-config/dist/utils/pseudoStateSelectors.cjs +122 -0
- package/dist/automated-config/dist/utils/pseudoStateSelectors.d.cts +80 -0
- package/dist/automated-config/dist/utils/pseudoStateSelectors.d.ts +80 -0
- package/dist/automated-config/dist/utils/pseudoStateSelectors.js +120 -0
- package/dist/automated-config/dist/utils/resolvePropertyStates.cjs +131 -0
- package/dist/automated-config/dist/utils/resolvePropertyStates.d.cts +49 -0
- package/dist/automated-config/dist/utils/resolvePropertyStates.d.ts +49 -0
- package/dist/automated-config/dist/utils/resolvePropertyStates.js +130 -0
- package/dist/automated-config/dist/utils/resolveSlotByCascade.cjs +118 -0
- package/dist/automated-config/dist/utils/resolveSlotByCascade.d.cts +68 -0
- package/dist/automated-config/dist/utils/resolveSlotByCascade.d.ts +68 -0
- package/dist/automated-config/dist/utils/resolveSlotByCascade.js +117 -0
- package/dist/automated-config/dist/utils/variantConfigGuards.d.cts +13 -0
- package/dist/automated-config/dist/utils/variantConfigGuards.d.ts +13 -0
- package/dist/components/client/Button.cjs +3 -3
- package/dist/components/client/Button.js +3 -3
- package/dist/components/client/Input/Input.cjs +42 -6
- package/dist/components/client/Input/Input.d.cts +13 -0
- package/dist/components/client/Input/Input.d.ts +13 -0
- package/dist/components/client/Input/Input.js +42 -6
- package/dist/components/client/Menu/Menu.ItemCheckbox.d.cts +1 -1
- package/dist/components/client/Menu/Menu.ItemCheckbox.d.ts +1 -1
- package/dist/config/dist/index.cjs +224 -553
- package/dist/config/dist/index.js +224 -553
- package/dist/css/dist/commands/css.cjs +1 -0
- package/dist/css/dist/commands/css.helpers.cjs +6 -0
- package/dist/css/dist/commands/css.helpers.js +6 -0
- package/dist/css/dist/commands/css.js +1 -0
- package/dist/css/dist/css/generate.cjs +4 -2
- package/dist/css/dist/css/generate.d.cts +28 -0
- package/dist/css/dist/css/generate.d.ts +28 -0
- package/dist/css/dist/css/generate.helpers.cjs +5 -1
- package/dist/css/dist/css/generate.helpers.js +6 -2
- package/dist/css/dist/css/generate.js +4 -2
- package/dist/css/dist/css/postcss.cjs +81 -0
- package/dist/css/dist/css/postcss.helpers.cjs +60 -0
- package/dist/css/dist/css/postcss.helpers.js +59 -1
- package/dist/css/dist/css/postcss.js +82 -2
- package/dist/css/dist/css/runner.cjs +12 -2
- package/dist/css/dist/css/runner.js +12 -2
- package/dist/css/dist/css/theme.d.cts +6 -0
- package/dist/css/dist/css/theme.d.ts +6 -0
- package/dist/css/dist/packages/automated-config/dist/properties.cjs +9 -2
- package/dist/css/dist/packages/automated-config/dist/properties.js +9 -2
- package/dist/css/dist/packages/automated-config/dist/utils/index.d.cts +6 -0
- package/dist/css/dist/packages/automated-config/dist/utils/index.d.ts +6 -0
- package/dist/css/dist/packages/config/dist/index.cjs +224 -553
- package/dist/css/dist/packages/config/dist/index.js +224 -553
- package/dist/css/dist/utils/optimizeCSS.cjs +59 -0
- package/dist/css/dist/utils/optimizeCSS.js +59 -0
- package/dist/css-tokens/dist/index.cjs +2 -0
- package/dist/css-tokens/dist/index.d.cts +2 -1
- package/dist/css-tokens/dist/index.d.ts +2 -1
- package/dist/css-tokens/dist/index.js +2 -1
- package/dist/index.cjs +48 -0
- package/dist/index.d.cts +15 -4
- package/dist/index.d.ts +15 -4
- package/dist/index.js +14 -3
- package/dist/styles/styler.d.cts +8 -7
- package/dist/styles/styler.d.ts +8 -7
- package/dist/styles/variants.d.cts +9 -4
- package/dist/styles/variants.d.ts +9 -4
- package/dist/tailwind-internal/dist/packages/automated-config/dist/generated/generatedConfigs.cjs +3078 -3089
- package/dist/tailwind-internal/dist/packages/automated-config/dist/generated/generatedConfigs.js +3078 -3089
- package/dist/tailwind-internal/dist/packages/automated-config/dist/properties.cjs +9 -2
- package/dist/tailwind-internal/dist/packages/automated-config/dist/properties.js +9 -2
- package/dist/tailwind-internal/dist/packages/automated-config/dist/types/StateAxis.cjs +81 -0
- package/dist/tailwind-internal/dist/packages/automated-config/dist/types/StateAxis.js +76 -0
- package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/canonicalizeStateKey.cjs +33 -0
- package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/canonicalizeStateKey.js +32 -0
- package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/componentStatePseudoStates.cjs +0 -7
- package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/componentStatePseudoStates.js +1 -7
- package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/getButtonControlHeight.cjs +126 -0
- package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/getButtonControlHeight.js +123 -0
- package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/iconButtonMatchButtonHeight.cjs +20 -0
- package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/iconButtonMatchButtonHeight.js +20 -0
- package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/index.cjs +422 -111
- package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/index.d.cts +6 -0
- package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/index.d.ts +6 -0
- package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/index.js +423 -112
- package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/pseudoStateSelectors.cjs +122 -0
- package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/pseudoStateSelectors.js +121 -0
- package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/resolvePropertyStates.cjs +132 -0
- package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/resolvePropertyStates.js +131 -0
- package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/resolveSlotByCascade.cjs +95 -0
- package/dist/tailwind-internal/dist/packages/automated-config/dist/utils/resolveSlotByCascade.js +95 -0
- package/dist/tailwind-internal/dist/packages/config/dist/index.cjs +224 -553
- package/dist/tailwind-internal/dist/packages/config/dist/index.js +224 -553
- package/dist/tailwind-internal/dist/packages/css-tokens/dist/index.cjs +2 -0
- package/dist/tailwind-internal/dist/packages/css-tokens/dist/index.js +2 -1
- package/dist/tailwind-internal/dist/plugins/components.cjs +28 -24
- package/dist/tailwind-internal/dist/plugins/components.js +28 -24
- package/dist/tailwind-internal/dist/utils/composeTailwindPlugins.d.cts +3 -0
- package/dist/tailwind-internal/dist/utils/composeTailwindPlugins.d.ts +3 -0
- 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 +47 -0
- package/dist/tokens/automation/index.d.cts +13 -2
- package/dist/tokens/automation/index.d.ts +13 -2
- package/dist/tokens/automation/index.js +13 -2
- package/dist/tokens/consts/cssTokens.cjs +1 -0
- package/dist/tokens/consts/cssTokens.d.cts +2 -2
- package/dist/tokens/consts/cssTokens.d.ts +2 -2
- package/dist/tokens/consts/cssTokens.js +2 -2
- package/dist/tokens/index.cjs +48 -0
- package/dist/tokens/index.d.cts +15 -4
- package/dist/tokens/index.d.ts +15 -4
- package/dist/tokens/index.js +14 -3
- package/dist/tokens/types.d.cts +1 -1
- package/dist/tokens/types.d.ts +1 -1
- package/dist/uds/generated/componentData.cjs +2177 -2172
- package/dist/uds/generated/componentData.js +2177 -2172
- package/dist/uds/generated/migrationSchemaVersion.cjs +1 -1
- package/dist/uds/generated/migrationSchemaVersion.js +1 -1
- package/dist/uds/generated/tailwindPurge.cjs +79 -78
- package/dist/uds/generated/tailwindPurge.js +79 -78
- package/generated/componentData.json +2718 -2713
- package/generated/migrationSchemaVersion.ts +1 -1
- package/generated/tailwindPurge.ts +2 -2
- package/package.json +1 -1
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
|
|
2
|
+
import { IconButtonMatchButtonHeightConfig } from "./iconButtonMatchButtonHeight.js";
|
|
3
|
+
|
|
4
|
+
//#region ../automated-config/dist/utils/getButtonControlHeight.d.ts
|
|
5
|
+
//#region src/utils/getButtonControlHeight.d.ts
|
|
6
|
+
type ThemeFn = (path: string) => string;
|
|
7
|
+
/** Sizes where IconButton control height should match Button. */
|
|
8
|
+
declare const SHARED_BUTTON_ICONBUTTON_SIZES: Set<string>;
|
|
9
|
+
type ButtonControlSchema = IconButtonMatchButtonHeightConfig & {
|
|
10
|
+
variables?: Record<string, Record<string, Record<string, {
|
|
11
|
+
value?: unknown;
|
|
12
|
+
}>>>;
|
|
13
|
+
};
|
|
14
|
+
declare function getButtonIconSizeVar({
|
|
15
|
+
schema,
|
|
16
|
+
iconLayerKey,
|
|
17
|
+
state,
|
|
18
|
+
theme
|
|
19
|
+
}: {
|
|
20
|
+
schema: ButtonControlSchema;
|
|
21
|
+
iconLayerKey: string;
|
|
22
|
+
state: string;
|
|
23
|
+
theme: ThemeFn;
|
|
24
|
+
}): string | undefined;
|
|
25
|
+
/**
|
|
26
|
+
* Button content box: max(icon size, text line-height).
|
|
27
|
+
* Matches Figma auto-layout and keeps IconButton height aligned with Button.
|
|
28
|
+
*/
|
|
29
|
+
declare function getButtonControlContentSize({
|
|
30
|
+
schema,
|
|
31
|
+
rootLayerKey,
|
|
32
|
+
iconLayerKey,
|
|
33
|
+
state,
|
|
34
|
+
theme
|
|
35
|
+
}: {
|
|
36
|
+
schema: ButtonControlSchema;
|
|
37
|
+
rootLayerKey: string;
|
|
38
|
+
iconLayerKey: string;
|
|
39
|
+
state: string;
|
|
40
|
+
theme: ThemeFn;
|
|
41
|
+
}): string | undefined;
|
|
42
|
+
/**
|
|
43
|
+
* Button control height: vertical padding on both sides plus max(icon size, text line-height).
|
|
44
|
+
*/
|
|
45
|
+
declare function getButtonControlHeight({
|
|
46
|
+
paddingVertical,
|
|
47
|
+
schema,
|
|
48
|
+
rootLayerKey,
|
|
49
|
+
iconLayerKey,
|
|
50
|
+
state,
|
|
51
|
+
theme
|
|
52
|
+
}: {
|
|
53
|
+
paddingVertical: string;
|
|
54
|
+
schema: ButtonControlSchema;
|
|
55
|
+
rootLayerKey: string;
|
|
56
|
+
iconLayerKey: string;
|
|
57
|
+
state: string;
|
|
58
|
+
theme: ThemeFn;
|
|
59
|
+
}): string | undefined;
|
|
60
|
+
/**
|
|
61
|
+
* IconButton control height: uniform padding plus icon size only (no typography).
|
|
62
|
+
*/
|
|
63
|
+
declare function getIconButtonControlHeight({
|
|
64
|
+
paddingVertical,
|
|
65
|
+
schema,
|
|
66
|
+
iconLayerKey,
|
|
67
|
+
state,
|
|
68
|
+
theme
|
|
69
|
+
}: {
|
|
70
|
+
paddingVertical: string;
|
|
71
|
+
schema: ButtonControlSchema;
|
|
72
|
+
iconLayerKey: string;
|
|
73
|
+
state: string;
|
|
74
|
+
theme: ThemeFn;
|
|
75
|
+
}): string | undefined;
|
|
76
|
+
/**
|
|
77
|
+
* Layout line-height for button root: max(icon size, text line-height).
|
|
78
|
+
*/
|
|
79
|
+
declare function getButtonContentLineHeight({
|
|
80
|
+
schema,
|
|
81
|
+
rootLayerKey,
|
|
82
|
+
iconLayerKey,
|
|
83
|
+
state,
|
|
84
|
+
theme
|
|
85
|
+
}: {
|
|
86
|
+
schema: ButtonControlSchema;
|
|
87
|
+
rootLayerKey: string;
|
|
88
|
+
iconLayerKey: string;
|
|
89
|
+
state: string;
|
|
90
|
+
theme: ThemeFn;
|
|
91
|
+
}): string;
|
|
92
|
+
declare function applyButtonControlHeightDeclarations({
|
|
93
|
+
cssDeclarations,
|
|
94
|
+
paddingVertical,
|
|
95
|
+
schema,
|
|
96
|
+
rootLayerKey,
|
|
97
|
+
iconLayerKey,
|
|
98
|
+
state,
|
|
99
|
+
theme
|
|
100
|
+
}: {
|
|
101
|
+
cssDeclarations: Record<string, string>;
|
|
102
|
+
paddingVertical: string;
|
|
103
|
+
schema: ButtonControlSchema;
|
|
104
|
+
rootLayerKey?: string;
|
|
105
|
+
iconLayerKey: string;
|
|
106
|
+
state: string;
|
|
107
|
+
theme: ThemeFn;
|
|
108
|
+
}): void;
|
|
109
|
+
/**
|
|
110
|
+
* IconButton height for xs–lg mirrors Button (padding + max(icon, line-height)).
|
|
111
|
+
* xl uses icon-only height from IconButton tokens.
|
|
112
|
+
*/
|
|
113
|
+
declare function applyIconButtonControlHeightDeclarations({
|
|
114
|
+
cssDeclarations,
|
|
115
|
+
paddingVertical,
|
|
116
|
+
iconButtonSchema,
|
|
117
|
+
buttonHeightReferenceSchema,
|
|
118
|
+
variantValue,
|
|
119
|
+
iconLayerKey: _iconLayerKey,
|
|
120
|
+
state,
|
|
121
|
+
theme
|
|
122
|
+
}: {
|
|
123
|
+
cssDeclarations: Record<string, string>;
|
|
124
|
+
paddingVertical: string;
|
|
125
|
+
iconButtonSchema: ButtonControlSchema;
|
|
126
|
+
buttonHeightReferenceSchema?: ButtonControlSchema;
|
|
127
|
+
variantValue: string;
|
|
128
|
+
iconLayerKey: string;
|
|
129
|
+
state: string;
|
|
130
|
+
theme: ThemeFn;
|
|
131
|
+
}): void; //#endregion
|
|
132
|
+
//#endregion
|
|
133
|
+
export { type ButtonControlSchema, SHARED_BUTTON_ICONBUTTON_SIZES, applyButtonControlHeightDeclarations, applyIconButtonControlHeightDeclarations, getButtonContentLineHeight, getButtonControlContentSize, getButtonControlHeight, getButtonIconSizeVar, getIconButtonControlHeight };
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
+
import { BUTTON_CONTROL_HEIGHT_VAR } from "../../../css-tokens/dist/index.js";
|
|
3
|
+
import { mapTextVariantFixtureToValue } from "../mapTextVariantFixtureToValue.js";
|
|
4
|
+
import { configurableProperties } from "../properties.js";
|
|
5
|
+
import { isIconButtonMatchButtonHeightEnabled } from "./iconButtonMatchButtonHeight.js";
|
|
6
|
+
//#region ../automated-config/dist/utils/getButtonControlHeight.js
|
|
7
|
+
/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
|
|
8
|
+
/** Sizes where IconButton control height should match Button. */
|
|
9
|
+
const SHARED_BUTTON_ICONBUTTON_SIZES = new Set([
|
|
10
|
+
"xs",
|
|
11
|
+
"sm",
|
|
12
|
+
"md",
|
|
13
|
+
"lg"
|
|
14
|
+
]);
|
|
15
|
+
function getButtonIconSizeVar({ schema, iconLayerKey, state, theme }) {
|
|
16
|
+
const iconSizeValue = schema.variables?.[iconLayerKey]?.size?.[state]?.value;
|
|
17
|
+
if (typeof iconSizeValue === "string" && iconSizeValue) return theme(configurableProperties.iconSize.twThemePath("iconSizes", iconSizeValue));
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Button content box: max(icon size, text line-height).
|
|
21
|
+
* Matches Figma auto-layout and keeps IconButton height aligned with Button.
|
|
22
|
+
*/
|
|
23
|
+
function getButtonControlContentSize({ schema, rootLayerKey, iconLayerKey, state, theme }) {
|
|
24
|
+
const iconSizeVar = getButtonIconSizeVar({
|
|
25
|
+
schema,
|
|
26
|
+
iconLayerKey,
|
|
27
|
+
state,
|
|
28
|
+
theme
|
|
29
|
+
});
|
|
30
|
+
const textVariantValue = schema.variables?.[rootLayerKey]?.textVariant?.[state]?.value;
|
|
31
|
+
if (iconSizeVar && typeof textVariantValue === "string" && textVariantValue) return `max(${iconSizeVar}, ${theme(mapTextVariantFixtureToValue("lineHeight")("textVariants", textVariantValue))})`;
|
|
32
|
+
if (iconSizeVar) return iconSizeVar;
|
|
33
|
+
}
|
|
34
|
+
/** `round(up, …, 1px)` matches Math.ceil in getButtonControlHeightPx and Figma hug height. */
|
|
35
|
+
function formatControlHeightCalc(calcExpression) {
|
|
36
|
+
return `round(up, ${calcExpression}, 1px)`;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Button control height: vertical padding on both sides plus max(icon size, text line-height).
|
|
40
|
+
*/
|
|
41
|
+
function getButtonControlHeight({ paddingVertical, schema, rootLayerKey, iconLayerKey, state, theme }) {
|
|
42
|
+
const contentSize = getButtonControlContentSize({
|
|
43
|
+
schema,
|
|
44
|
+
rootLayerKey,
|
|
45
|
+
iconLayerKey,
|
|
46
|
+
state,
|
|
47
|
+
theme
|
|
48
|
+
});
|
|
49
|
+
if (!contentSize) return;
|
|
50
|
+
return formatControlHeightCalc(`calc(2 * ${paddingVertical} + ${contentSize})`);
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* IconButton control height: uniform padding plus icon size only (no typography).
|
|
54
|
+
*/
|
|
55
|
+
function getIconButtonControlHeight({ paddingVertical, schema, iconLayerKey, state, theme }) {
|
|
56
|
+
const iconSizeVar = getButtonIconSizeVar({
|
|
57
|
+
schema,
|
|
58
|
+
iconLayerKey,
|
|
59
|
+
state,
|
|
60
|
+
theme
|
|
61
|
+
});
|
|
62
|
+
if (!iconSizeVar) return;
|
|
63
|
+
return formatControlHeightCalc(`calc(2 * ${paddingVertical} + ${iconSizeVar})`);
|
|
64
|
+
}
|
|
65
|
+
/**
|
|
66
|
+
* Layout line-height for button root: max(icon size, text line-height).
|
|
67
|
+
*/
|
|
68
|
+
function getButtonContentLineHeight({ schema, rootLayerKey, iconLayerKey, state, theme }) {
|
|
69
|
+
return getButtonControlContentSize({
|
|
70
|
+
schema,
|
|
71
|
+
rootLayerKey,
|
|
72
|
+
iconLayerKey,
|
|
73
|
+
state,
|
|
74
|
+
theme
|
|
75
|
+
}) ?? "1em";
|
|
76
|
+
}
|
|
77
|
+
function applyButtonControlHeightDeclarations({ cssDeclarations, paddingVertical, schema, rootLayerKey, iconLayerKey, state, theme }) {
|
|
78
|
+
const controlHeight = rootLayerKey ? getButtonControlHeight({
|
|
79
|
+
paddingVertical,
|
|
80
|
+
schema,
|
|
81
|
+
rootLayerKey,
|
|
82
|
+
iconLayerKey,
|
|
83
|
+
state,
|
|
84
|
+
theme
|
|
85
|
+
}) : getIconButtonControlHeight({
|
|
86
|
+
paddingVertical,
|
|
87
|
+
schema,
|
|
88
|
+
iconLayerKey,
|
|
89
|
+
state,
|
|
90
|
+
theme
|
|
91
|
+
});
|
|
92
|
+
if (controlHeight) {
|
|
93
|
+
cssDeclarations[BUTTON_CONTROL_HEIGHT_VAR] = controlHeight;
|
|
94
|
+
cssDeclarations.height = `var(${BUTTON_CONTROL_HEIGHT_VAR})`;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
function applyIconButtonSquareDimensions(cssDeclarations) {
|
|
98
|
+
if (cssDeclarations[BUTTON_CONTROL_HEIGHT_VAR]) cssDeclarations.width = `var(${BUTTON_CONTROL_HEIGHT_VAR})`;
|
|
99
|
+
}
|
|
100
|
+
/**
|
|
101
|
+
* IconButton height for xs–lg mirrors Button (padding + max(icon, line-height)).
|
|
102
|
+
* xl uses icon-only height from IconButton tokens.
|
|
103
|
+
*/
|
|
104
|
+
function applyIconButtonControlHeightDeclarations({ cssDeclarations, paddingVertical, iconButtonSchema, buttonHeightReferenceSchema, variantValue, iconLayerKey: _iconLayerKey, state, theme }) {
|
|
105
|
+
if (buttonHeightReferenceSchema && SHARED_BUTTON_ICONBUTTON_SIZES.has(variantValue) && isIconButtonMatchButtonHeightEnabled(iconButtonSchema, variantValue)) {
|
|
106
|
+
const buttonRootLayerKey = `size/${variantValue}/root`;
|
|
107
|
+
const buttonIconLayerKey = `size/${variantValue}/icon`;
|
|
108
|
+
const buttonSpacingValue = buttonHeightReferenceSchema.variables?.[buttonRootLayerKey]?.spacingVertical?.[state]?.value;
|
|
109
|
+
applyButtonControlHeightDeclarations({
|
|
110
|
+
cssDeclarations,
|
|
111
|
+
paddingVertical: typeof buttonSpacingValue === "string" && buttonSpacingValue ? theme(configurableProperties.spacingVertical.twThemePath("spacingAliases", buttonSpacingValue)) : paddingVertical,
|
|
112
|
+
schema: buttonHeightReferenceSchema,
|
|
113
|
+
rootLayerKey: buttonRootLayerKey,
|
|
114
|
+
iconLayerKey: buttonIconLayerKey,
|
|
115
|
+
state,
|
|
116
|
+
theme
|
|
117
|
+
});
|
|
118
|
+
applyIconButtonSquareDimensions(cssDeclarations);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
//#endregion
|
|
122
|
+
export { SHARED_BUTTON_ICONBUTTON_SIZES, applyButtonControlHeightDeclarations, applyIconButtonControlHeightDeclarations, getButtonContentLineHeight, getButtonControlContentSize, getButtonControlHeight, getButtonIconSizeVar, getIconButtonControlHeight };
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
+
require("../../../_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
const require_index = require("../../../fixtures/dist/index.cjs");
|
|
4
|
+
const require_iconButtonMatchButtonHeight = require("./iconButtonMatchButtonHeight.cjs");
|
|
5
|
+
let _yahoo_uds_icons_tokens = require("@yahoo/uds-icons/tokens");
|
|
6
|
+
let lodash_es = require("lodash-es");
|
|
7
|
+
//#region ../automated-config/dist/utils/getButtonControlHeightPx.js
|
|
8
|
+
/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
|
|
9
|
+
const SHARED_BUTTON_ICONBUTTON_SIZES = new Set([
|
|
10
|
+
"xs",
|
|
11
|
+
"sm",
|
|
12
|
+
"md",
|
|
13
|
+
"lg"
|
|
14
|
+
]);
|
|
15
|
+
function resolveSpacingPx(config, alias) {
|
|
16
|
+
if (!alias) return 0;
|
|
17
|
+
const scaleValue = (0, lodash_es.get)(config, [
|
|
18
|
+
"scaleMode",
|
|
19
|
+
"large",
|
|
20
|
+
"spacing",
|
|
21
|
+
alias.replace(".", "_")
|
|
22
|
+
]);
|
|
23
|
+
if (typeof scaleValue === "number") return scaleValue;
|
|
24
|
+
return require_index.spacingMap[alias] ?? 0;
|
|
25
|
+
}
|
|
26
|
+
function resolveTypographyPx(config, textVariant, property) {
|
|
27
|
+
if (!textVariant) return 0;
|
|
28
|
+
const typographyConfig = config.typography[textVariant];
|
|
29
|
+
if (!typographyConfig?.[property]) return 0;
|
|
30
|
+
const defaultBreakpoint = config.globalDefaults.breakpoint;
|
|
31
|
+
const value = defaultBreakpoint === "base" ? typographyConfig[property].base : typographyConfig[property].breakpoints[defaultBreakpoint];
|
|
32
|
+
if (typeof value === "number") return value;
|
|
33
|
+
if (value && typeof value === "object" && "value" in value) return value.value;
|
|
34
|
+
return 0;
|
|
35
|
+
}
|
|
36
|
+
/** Ceil fractional totals so Figma-bound controlHeight matches auto-layout hug (e.g. xs + ui3 15.4lh → 28). */
|
|
37
|
+
function snapControlHeightPx(value) {
|
|
38
|
+
return Math.ceil(value);
|
|
39
|
+
}
|
|
40
|
+
/** Pixel control height for Button: padding + max(icon size, text line-height). */
|
|
41
|
+
function getButtonControlHeightPx(config, size) {
|
|
42
|
+
const button = config.button;
|
|
43
|
+
if (!button?.variables) return 0;
|
|
44
|
+
const layerPrefix = `size/${size}`;
|
|
45
|
+
const paddingAlias = button.variables[`${layerPrefix}/root`]?.spacingVertical?.rest?.value;
|
|
46
|
+
const iconSizeAlias = button.variables[`${layerPrefix}/icon`]?.size?.rest?.value;
|
|
47
|
+
const textVariant = button.variables[`${layerPrefix}/root`]?.textVariant?.rest?.value;
|
|
48
|
+
const padding = resolveSpacingPx(config, paddingAlias);
|
|
49
|
+
const iconSize = _yahoo_uds_icons_tokens.ICON_SIZE_MAP[iconSizeAlias ?? "sm"] ?? 16;
|
|
50
|
+
const lineHeight = resolveTypographyPx(config, textVariant, "lineHeight");
|
|
51
|
+
return snapControlHeightPx(padding * 2 + Math.max(iconSize, lineHeight || iconSize));
|
|
52
|
+
}
|
|
53
|
+
/** Pixel control height for IconButton: uniform padding plus icon size only. */
|
|
54
|
+
function getIconButtonOnlyControlHeightPx(config, size) {
|
|
55
|
+
const iconButton = config.iconButton;
|
|
56
|
+
if (!iconButton?.variables) return 0;
|
|
57
|
+
const layerPrefix = `size/${size}`;
|
|
58
|
+
const paddingAlias = iconButton.variables[`${layerPrefix}/root`]?.spacing?.rest?.value;
|
|
59
|
+
const iconSizeAlias = iconButton.variables[`${layerPrefix}/icon`]?.size?.rest?.value;
|
|
60
|
+
const padding = resolveSpacingPx(config, paddingAlias);
|
|
61
|
+
const iconSize = _yahoo_uds_icons_tokens.ICON_SIZE_MAP[iconSizeAlias ?? "sm"] ?? 16;
|
|
62
|
+
return snapControlHeightPx(padding * 2 + iconSize);
|
|
63
|
+
}
|
|
64
|
+
/** Pixel control height for IconButton when match-button-height is enabled for that size. */
|
|
65
|
+
function getIconButtonControlHeightPx(config, size) {
|
|
66
|
+
if (SHARED_BUTTON_ICONBUTTON_SIZES.has(size)) {
|
|
67
|
+
if (!require_iconButtonMatchButtonHeight.isIconButtonMatchButtonHeightEnabled(config, size)) return 0;
|
|
68
|
+
return getButtonControlHeightPx(config, size);
|
|
69
|
+
}
|
|
70
|
+
return 0;
|
|
71
|
+
}
|
|
72
|
+
function setControlHeightVar(config, componentKey, size, heightPx) {
|
|
73
|
+
const rootKey = `size/${size}/root`;
|
|
74
|
+
const componentConfig = config[componentKey];
|
|
75
|
+
const existingRoot = componentConfig?.variables?.[rootKey] ?? {};
|
|
76
|
+
return {
|
|
77
|
+
...config,
|
|
78
|
+
[componentKey]: {
|
|
79
|
+
...componentConfig,
|
|
80
|
+
variables: {
|
|
81
|
+
...componentConfig?.variables,
|
|
82
|
+
[rootKey]: {
|
|
83
|
+
...existingRoot,
|
|
84
|
+
controlHeight: { rest: {
|
|
85
|
+
type: "positiveIntegers",
|
|
86
|
+
value: snapControlHeightPx(heightPx),
|
|
87
|
+
valueType: "alias"
|
|
88
|
+
} }
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
}
|
|
94
|
+
function syncButtonControlHeightVarForSize(config, size) {
|
|
95
|
+
if (!SHARED_BUTTON_ICONBUTTON_SIZES.has(size) || !require_iconButtonMatchButtonHeight.isIconButtonMatchButtonHeightEnabled(config, size)) return config;
|
|
96
|
+
return setControlHeightVar(config, "iconButton", size, getButtonControlHeightPx(config, size));
|
|
97
|
+
}
|
|
98
|
+
function syncIconButtonControlHeightVarForSize(config, size) {
|
|
99
|
+
const heightPx = getIconButtonControlHeightPx(config, size);
|
|
100
|
+
if (heightPx <= 0) return config;
|
|
101
|
+
return setControlHeightVar(config, "iconButton", size, heightPx);
|
|
102
|
+
}
|
|
103
|
+
function syncIconButtonOnlyControlHeightVarForSize(config, size) {
|
|
104
|
+
const heightPx = getIconButtonOnlyControlHeightPx(config, size);
|
|
105
|
+
if (heightPx <= 0) return config;
|
|
106
|
+
return setControlHeightVar(config, "iconButton", size, heightPx);
|
|
107
|
+
}
|
|
108
|
+
//#endregion
|
|
109
|
+
exports.getButtonControlHeightPx = getButtonControlHeightPx;
|
|
110
|
+
exports.getIconButtonControlHeightPx = getIconButtonControlHeightPx;
|
|
111
|
+
exports.getIconButtonOnlyControlHeightPx = getIconButtonOnlyControlHeightPx;
|
|
112
|
+
exports.syncButtonControlHeightVarForSize = syncButtonControlHeightVarForSize;
|
|
113
|
+
exports.syncIconButtonControlHeightVarForSize = syncIconButtonControlHeightVarForSize;
|
|
114
|
+
exports.syncIconButtonOnlyControlHeightVarForSize = syncIconButtonOnlyControlHeightVarForSize;
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
|
|
2
|
+
import { ButtonSize, IconButtonSize } from "../../../types/dist/index.cjs";
|
|
3
|
+
import { IconButtonMatchButtonHeightConfig } from "./iconButtonMatchButtonHeight.cjs";
|
|
4
|
+
|
|
5
|
+
//#region ../automated-config/dist/utils/getButtonControlHeightPx.d.ts
|
|
6
|
+
//#region src/utils/getButtonControlHeightPx.d.ts
|
|
7
|
+
type ButtonControlHeightConfig = IconButtonMatchButtonHeightConfig & {
|
|
8
|
+
button?: {
|
|
9
|
+
variables?: Record<string, {
|
|
10
|
+
spacingVertical?: {
|
|
11
|
+
rest?: {
|
|
12
|
+
value?: string;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
textVariant?: {
|
|
16
|
+
rest?: {
|
|
17
|
+
value?: string;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
size?: {
|
|
21
|
+
rest?: {
|
|
22
|
+
value?: string;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
}>;
|
|
26
|
+
};
|
|
27
|
+
iconButton?: {
|
|
28
|
+
variables?: Record<string, {
|
|
29
|
+
spacing?: {
|
|
30
|
+
rest?: {
|
|
31
|
+
value?: string;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
size?: {
|
|
35
|
+
rest?: {
|
|
36
|
+
value?: string;
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
}>;
|
|
40
|
+
};
|
|
41
|
+
typography: Record<string, {
|
|
42
|
+
fontSize: {
|
|
43
|
+
base: number | {
|
|
44
|
+
value: number;
|
|
45
|
+
};
|
|
46
|
+
breakpoints: Record<string, number | {
|
|
47
|
+
value: number;
|
|
48
|
+
}>;
|
|
49
|
+
};
|
|
50
|
+
lineHeight: {
|
|
51
|
+
base: number | {
|
|
52
|
+
value: number;
|
|
53
|
+
};
|
|
54
|
+
breakpoints: Record<string, number | {
|
|
55
|
+
value: number;
|
|
56
|
+
}>;
|
|
57
|
+
};
|
|
58
|
+
}>;
|
|
59
|
+
scaleMode: {
|
|
60
|
+
large: {
|
|
61
|
+
spacing: Record<string, number>;
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
globalDefaults: {
|
|
65
|
+
breakpoint: string;
|
|
66
|
+
};
|
|
67
|
+
};
|
|
68
|
+
/** Pixel control height for Button: padding + max(icon size, text line-height). */
|
|
69
|
+
declare function getButtonControlHeightPx(config: ButtonControlHeightConfig, size: ButtonSize): number;
|
|
70
|
+
/** Pixel control height for IconButton: uniform padding plus icon size only. */
|
|
71
|
+
declare function getIconButtonOnlyControlHeightPx(config: ButtonControlHeightConfig, size: IconButtonSize): number;
|
|
72
|
+
/** Pixel control height for IconButton when match-button-height is enabled for that size. */
|
|
73
|
+
declare function getIconButtonControlHeightPx(config: ButtonControlHeightConfig, size: IconButtonSize): number;
|
|
74
|
+
declare function syncButtonControlHeightVarForSize<T extends object>(config: T, size: ButtonSize): T;
|
|
75
|
+
declare function syncIconButtonControlHeightVarForSize<T extends object>(config: T, size: IconButtonSize): T;
|
|
76
|
+
declare function syncIconButtonOnlyControlHeightVarForSize<T extends object>(config: T, size: IconButtonSize): T; //#endregion
|
|
77
|
+
//#endregion
|
|
78
|
+
export { getButtonControlHeightPx, getIconButtonControlHeightPx, getIconButtonOnlyControlHeightPx, syncButtonControlHeightVarForSize, syncIconButtonControlHeightVarForSize, syncIconButtonOnlyControlHeightVarForSize };
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
|
|
2
|
+
import { ButtonSize, IconButtonSize } from "../../../types/dist/index.js";
|
|
3
|
+
import { IconButtonMatchButtonHeightConfig } from "./iconButtonMatchButtonHeight.js";
|
|
4
|
+
|
|
5
|
+
//#region ../automated-config/dist/utils/getButtonControlHeightPx.d.ts
|
|
6
|
+
//#region src/utils/getButtonControlHeightPx.d.ts
|
|
7
|
+
type ButtonControlHeightConfig = IconButtonMatchButtonHeightConfig & {
|
|
8
|
+
button?: {
|
|
9
|
+
variables?: Record<string, {
|
|
10
|
+
spacingVertical?: {
|
|
11
|
+
rest?: {
|
|
12
|
+
value?: string;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
textVariant?: {
|
|
16
|
+
rest?: {
|
|
17
|
+
value?: string;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
size?: {
|
|
21
|
+
rest?: {
|
|
22
|
+
value?: string;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
}>;
|
|
26
|
+
};
|
|
27
|
+
iconButton?: {
|
|
28
|
+
variables?: Record<string, {
|
|
29
|
+
spacing?: {
|
|
30
|
+
rest?: {
|
|
31
|
+
value?: string;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
size?: {
|
|
35
|
+
rest?: {
|
|
36
|
+
value?: string;
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
}>;
|
|
40
|
+
};
|
|
41
|
+
typography: Record<string, {
|
|
42
|
+
fontSize: {
|
|
43
|
+
base: number | {
|
|
44
|
+
value: number;
|
|
45
|
+
};
|
|
46
|
+
breakpoints: Record<string, number | {
|
|
47
|
+
value: number;
|
|
48
|
+
}>;
|
|
49
|
+
};
|
|
50
|
+
lineHeight: {
|
|
51
|
+
base: number | {
|
|
52
|
+
value: number;
|
|
53
|
+
};
|
|
54
|
+
breakpoints: Record<string, number | {
|
|
55
|
+
value: number;
|
|
56
|
+
}>;
|
|
57
|
+
};
|
|
58
|
+
}>;
|
|
59
|
+
scaleMode: {
|
|
60
|
+
large: {
|
|
61
|
+
spacing: Record<string, number>;
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
globalDefaults: {
|
|
65
|
+
breakpoint: string;
|
|
66
|
+
};
|
|
67
|
+
};
|
|
68
|
+
/** Pixel control height for Button: padding + max(icon size, text line-height). */
|
|
69
|
+
declare function getButtonControlHeightPx(config: ButtonControlHeightConfig, size: ButtonSize): number;
|
|
70
|
+
/** Pixel control height for IconButton: uniform padding plus icon size only. */
|
|
71
|
+
declare function getIconButtonOnlyControlHeightPx(config: ButtonControlHeightConfig, size: IconButtonSize): number;
|
|
72
|
+
/** Pixel control height for IconButton when match-button-height is enabled for that size. */
|
|
73
|
+
declare function getIconButtonControlHeightPx(config: ButtonControlHeightConfig, size: IconButtonSize): number;
|
|
74
|
+
declare function syncButtonControlHeightVarForSize<T extends object>(config: T, size: ButtonSize): T;
|
|
75
|
+
declare function syncIconButtonControlHeightVarForSize<T extends object>(config: T, size: IconButtonSize): T;
|
|
76
|
+
declare function syncIconButtonOnlyControlHeightVarForSize<T extends object>(config: T, size: IconButtonSize): T; //#endregion
|
|
77
|
+
//#endregion
|
|
78
|
+
export { getButtonControlHeightPx, getIconButtonControlHeightPx, getIconButtonOnlyControlHeightPx, syncButtonControlHeightVarForSize, syncIconButtonControlHeightVarForSize, syncIconButtonOnlyControlHeightVarForSize };
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
+
import { spacingMap } from "../../../fixtures/dist/index.js";
|
|
3
|
+
import { isIconButtonMatchButtonHeightEnabled } from "./iconButtonMatchButtonHeight.js";
|
|
4
|
+
import { get } from "lodash-es";
|
|
5
|
+
import { ICON_SIZE_MAP } from "@yahoo/uds-icons/tokens";
|
|
6
|
+
//#region ../automated-config/dist/utils/getButtonControlHeightPx.js
|
|
7
|
+
/*! © 2026 Yahoo, Inc. UDS Default Config v0.0.0-development */
|
|
8
|
+
const SHARED_BUTTON_ICONBUTTON_SIZES = new Set([
|
|
9
|
+
"xs",
|
|
10
|
+
"sm",
|
|
11
|
+
"md",
|
|
12
|
+
"lg"
|
|
13
|
+
]);
|
|
14
|
+
function resolveSpacingPx(config, alias) {
|
|
15
|
+
if (!alias) return 0;
|
|
16
|
+
const scaleValue = get(config, [
|
|
17
|
+
"scaleMode",
|
|
18
|
+
"large",
|
|
19
|
+
"spacing",
|
|
20
|
+
alias.replace(".", "_")
|
|
21
|
+
]);
|
|
22
|
+
if (typeof scaleValue === "number") return scaleValue;
|
|
23
|
+
return spacingMap[alias] ?? 0;
|
|
24
|
+
}
|
|
25
|
+
function resolveTypographyPx(config, textVariant, property) {
|
|
26
|
+
if (!textVariant) return 0;
|
|
27
|
+
const typographyConfig = config.typography[textVariant];
|
|
28
|
+
if (!typographyConfig?.[property]) return 0;
|
|
29
|
+
const defaultBreakpoint = config.globalDefaults.breakpoint;
|
|
30
|
+
const value = defaultBreakpoint === "base" ? typographyConfig[property].base : typographyConfig[property].breakpoints[defaultBreakpoint];
|
|
31
|
+
if (typeof value === "number") return value;
|
|
32
|
+
if (value && typeof value === "object" && "value" in value) return value.value;
|
|
33
|
+
return 0;
|
|
34
|
+
}
|
|
35
|
+
/** Ceil fractional totals so Figma-bound controlHeight matches auto-layout hug (e.g. xs + ui3 15.4lh → 28). */
|
|
36
|
+
function snapControlHeightPx(value) {
|
|
37
|
+
return Math.ceil(value);
|
|
38
|
+
}
|
|
39
|
+
/** Pixel control height for Button: padding + max(icon size, text line-height). */
|
|
40
|
+
function getButtonControlHeightPx(config, size) {
|
|
41
|
+
const button = config.button;
|
|
42
|
+
if (!button?.variables) return 0;
|
|
43
|
+
const layerPrefix = `size/${size}`;
|
|
44
|
+
const paddingAlias = button.variables[`${layerPrefix}/root`]?.spacingVertical?.rest?.value;
|
|
45
|
+
const iconSizeAlias = button.variables[`${layerPrefix}/icon`]?.size?.rest?.value;
|
|
46
|
+
const textVariant = button.variables[`${layerPrefix}/root`]?.textVariant?.rest?.value;
|
|
47
|
+
const padding = resolveSpacingPx(config, paddingAlias);
|
|
48
|
+
const iconSize = ICON_SIZE_MAP[iconSizeAlias ?? "sm"] ?? 16;
|
|
49
|
+
const lineHeight = resolveTypographyPx(config, textVariant, "lineHeight");
|
|
50
|
+
return snapControlHeightPx(padding * 2 + Math.max(iconSize, lineHeight || iconSize));
|
|
51
|
+
}
|
|
52
|
+
/** Pixel control height for IconButton: uniform padding plus icon size only. */
|
|
53
|
+
function getIconButtonOnlyControlHeightPx(config, size) {
|
|
54
|
+
const iconButton = config.iconButton;
|
|
55
|
+
if (!iconButton?.variables) return 0;
|
|
56
|
+
const layerPrefix = `size/${size}`;
|
|
57
|
+
const paddingAlias = iconButton.variables[`${layerPrefix}/root`]?.spacing?.rest?.value;
|
|
58
|
+
const iconSizeAlias = iconButton.variables[`${layerPrefix}/icon`]?.size?.rest?.value;
|
|
59
|
+
const padding = resolveSpacingPx(config, paddingAlias);
|
|
60
|
+
const iconSize = ICON_SIZE_MAP[iconSizeAlias ?? "sm"] ?? 16;
|
|
61
|
+
return snapControlHeightPx(padding * 2 + iconSize);
|
|
62
|
+
}
|
|
63
|
+
/** Pixel control height for IconButton when match-button-height is enabled for that size. */
|
|
64
|
+
function getIconButtonControlHeightPx(config, size) {
|
|
65
|
+
if (SHARED_BUTTON_ICONBUTTON_SIZES.has(size)) {
|
|
66
|
+
if (!isIconButtonMatchButtonHeightEnabled(config, size)) return 0;
|
|
67
|
+
return getButtonControlHeightPx(config, size);
|
|
68
|
+
}
|
|
69
|
+
return 0;
|
|
70
|
+
}
|
|
71
|
+
function setControlHeightVar(config, componentKey, size, heightPx) {
|
|
72
|
+
const rootKey = `size/${size}/root`;
|
|
73
|
+
const componentConfig = config[componentKey];
|
|
74
|
+
const existingRoot = componentConfig?.variables?.[rootKey] ?? {};
|
|
75
|
+
return {
|
|
76
|
+
...config,
|
|
77
|
+
[componentKey]: {
|
|
78
|
+
...componentConfig,
|
|
79
|
+
variables: {
|
|
80
|
+
...componentConfig?.variables,
|
|
81
|
+
[rootKey]: {
|
|
82
|
+
...existingRoot,
|
|
83
|
+
controlHeight: { rest: {
|
|
84
|
+
type: "positiveIntegers",
|
|
85
|
+
value: snapControlHeightPx(heightPx),
|
|
86
|
+
valueType: "alias"
|
|
87
|
+
} }
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
function syncButtonControlHeightVarForSize(config, size) {
|
|
94
|
+
if (!SHARED_BUTTON_ICONBUTTON_SIZES.has(size) || !isIconButtonMatchButtonHeightEnabled(config, size)) return config;
|
|
95
|
+
return setControlHeightVar(config, "iconButton", size, getButtonControlHeightPx(config, size));
|
|
96
|
+
}
|
|
97
|
+
function syncIconButtonControlHeightVarForSize(config, size) {
|
|
98
|
+
const heightPx = getIconButtonControlHeightPx(config, size);
|
|
99
|
+
if (heightPx <= 0) return config;
|
|
100
|
+
return setControlHeightVar(config, "iconButton", size, heightPx);
|
|
101
|
+
}
|
|
102
|
+
function syncIconButtonOnlyControlHeightVarForSize(config, size) {
|
|
103
|
+
const heightPx = getIconButtonOnlyControlHeightPx(config, size);
|
|
104
|
+
if (heightPx <= 0) return config;
|
|
105
|
+
return setControlHeightVar(config, "iconButton", size, heightPx);
|
|
106
|
+
}
|
|
107
|
+
//#endregion
|
|
108
|
+
export { getButtonControlHeightPx, getIconButtonControlHeightPx, getIconButtonOnlyControlHeightPx, syncButtonControlHeightVarForSize, syncIconButtonControlHeightVarForSize, syncIconButtonOnlyControlHeightVarForSize };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
|
|
2
|
+
import { ComponentConfig, VariantConfig } from "../types/ComponentConfig.cjs";
|
|
3
|
+
|
|
4
|
+
//#region ../automated-config/dist/utils/getConfigComponentVariant.d.ts
|
|
5
|
+
//#region src/utils/getConfigComponentVariant.d.ts
|
|
6
|
+
declare function getConfigComponentVariant<C extends ComponentConfig>(config: C, variantKey: string, subComponentName?: string): VariantConfig<string> | null; //#endregion
|
|
7
|
+
//#endregion
|
|
8
|
+
export { getConfigComponentVariant };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
|
|
2
|
+
import { ComponentConfig, VariantConfig } from "../types/ComponentConfig.js";
|
|
3
|
+
|
|
4
|
+
//#region ../automated-config/dist/utils/getConfigComponentVariant.d.ts
|
|
5
|
+
//#region src/utils/getConfigComponentVariant.d.ts
|
|
6
|
+
declare function getConfigComponentVariant<C extends ComponentConfig>(config: C, variantKey: string, subComponentName?: string): VariantConfig<string> | null; //#endregion
|
|
7
|
+
//#endregion
|
|
8
|
+
export { getConfigComponentVariant };
|