Skip to content

Fix: correction for responsive variables in box and stack #246

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
krishan711 merged 2 commits into from
Jan 30, 2026
Merged

Fix: correction for responsive variables in box and stack #246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
57cb49f
.
krishan711 Jan 30, 2026
9b38ad7
.
krishan711 Jan 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 9 additions & 17 deletions src/layouts/grid/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,6 @@ export function Grid({
const sizeResponsive = childProps.sizeResponsive ?? {};
const itemStyles: React.CSSProperties = {
...childProps.style,
// @ts-expect-error CSS custom properties
'--kiba-grid-item-gutter': gutter,
'--kiba-grid-item-alignment': childProps.alignment ? getFlexItemAlignment(childProps.alignment) : 'auto',
'--kiba-grid-item-width': getItemWidth(columnCount, size, gutter),
Expand All @@ -96,22 +95,15 @@ export function Grid({
'--kiba-grid-item-height': '100%',
'--kiba-grid-item-overflow-y': 'auto',
} : {}),
...(sizeResponsive.small !== undefined ? {
'--kiba-grid-item-width-sm': getItemWidth(columnCount, sizeResponsive.small, gutter),
'--kiba-grid-item-display-sm': getItemDisplay(sizeResponsive.small),
} : {}),
...(sizeResponsive.medium !== undefined ? {
'--kiba-grid-item-width-md': getItemWidth(columnCount, sizeResponsive.medium, gutter),
'--kiba-grid-item-display-md': getItemDisplay(sizeResponsive.medium),
} : {}),
...(sizeResponsive.large !== undefined ? {
'--kiba-grid-item-width-lg': getItemWidth(columnCount, sizeResponsive.large, gutter),
'--kiba-grid-item-display-lg': getItemDisplay(sizeResponsive.large),
} : {}),
...(sizeResponsive.extraLarge !== undefined ? {
'--kiba-grid-item-width-xl': getItemWidth(columnCount, sizeResponsive.extraLarge, gutter),
'--kiba-grid-item-display-xl': getItemDisplay(sizeResponsive.extraLarge),
} : {}),
// @ts-expect-error
'--kiba-grid-item-width-sm': sizeResponsive.small !== undefined ? getItemWidth(columnCount, sizeResponsive.small, gutter) : 'initial',
'--kiba-grid-item-display-sm': sizeResponsive.small !== undefined ? getItemDisplay(sizeResponsive.small) : 'initial',
'--kiba-grid-item-width-md': sizeResponsive.medium !== undefined ? getItemWidth(columnCount, sizeResponsive.medium, gutter) : 'initial',
'--kiba-grid-item-display-md': sizeResponsive.medium !== undefined ? getItemDisplay(sizeResponsive.medium) : 'initial',
'--kiba-grid-item-width-lg': sizeResponsive.large !== undefined ? getItemWidth(columnCount, sizeResponsive.large, gutter) : 'initial',
'--kiba-grid-item-display-lg': sizeResponsive.large !== undefined ? getItemDisplay(sizeResponsive.large) : 'initial',
'--kiba-grid-item-width-xl': sizeResponsive.extraLarge !== undefined ? getItemWidth(columnCount, sizeResponsive.extraLarge, gutter) : 'initial',
'--kiba-grid-item-display-xl': sizeResponsive.extraLarge !== undefined ? getItemDisplay(sizeResponsive.extraLarge) : 'initial',
};
return (
<div
Expand Down
22 changes: 13 additions & 9 deletions src/layouts/stack/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,19 +161,23 @@ export function Stack({
const shouldWrapItems = props.shouldWrapItems || false;
const stackStyles: React.CSSProperties = {
'--kiba-stack-direction-base': getDirectionValue(direction),
...responsiveValueToCss(props.directionResponsive, '--kiba-stack-direction', getDirectionValue),
...responsiveValueToCss(props.directionResponsive, '--kiba-stack-direction', getDirectionValue, true),
'--kiba-stack-child-alignment-base': getFlexItemAlignment(childAlignment),
...responsiveValueToCss(props.childAlignmentResponsive, '--kiba-stack-child-alignment', getFlexItemAlignment),
...responsiveValueToCss(props.childAlignmentResponsive, '--kiba-stack-child-alignment', getFlexItemAlignment, true),
'--kiba-stack-content-alignment-base': getFlexContentAlignment(contentAlignment),
...responsiveValueToCss(props.contentAlignmentResponsive, '--kiba-stack-content-alignment', getFlexContentAlignment),
...responsiveValueToCss(props.contentAlignmentResponsive, '--kiba-stack-content-alignment', getFlexContentAlignment, true),
'--kiba-stack-height-base': height,
...responsiveValueToCss(props.heightResponsive, '--kiba-stack-height'),
...responsiveValueToCss(props.heightResponsive, '--kiba-stack-height', undefined, true),
'--kiba-stack-width-base': width,
...responsiveValueToCss(props.widthResponsive, '--kiba-stack-width'),
...(maxHeightResponsive ? { '--kiba-stack-max-height-base': maxHeightResponsive.base ?? 'none', ...responsiveValueToCss(maxHeightResponsive, '--kiba-stack-max-height') } : {}),
...(maxWidthResponsive ? { '--kiba-stack-max-width-base': maxWidthResponsive.base ?? 'none', ...responsiveValueToCss(maxWidthResponsive, '--kiba-stack-max-width') } : {}),
...(minHeightResponsive ? { '--kiba-stack-min-height-base': minHeightResponsive.base ?? '0', ...responsiveValueToCss(minHeightResponsive, '--kiba-stack-min-height') } : {}),
...(minWidthResponsive ? { '--kiba-stack-min-width-base': minWidthResponsive.base ?? '0', ...responsiveValueToCss(minWidthResponsive, '--kiba-stack-min-width') } : {}),
...responsiveValueToCss(props.widthResponsive, '--kiba-stack-width', undefined, true),
Comment on lines 163 to +172
Copy link

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With shouldResetInheritance set to true, responsiveValueToCss currently emits breakpoint variables with the value 'initial' when the responsive prop is undefined. Because stack/styles.scss uses var(--kiba-stack-*-small, var(--kiba-stack-*-base, ...)), this will force breakpoints to use CSS-wide keyword initial instead of falling back to the *-base variables.

Concrete impact: a default vertical stack will become flex-direction: initial (i.e. row) at screen-small and above, and justify-content: initial (typically flex-start) instead of the configured base value.

This should be switched to a value that makes the custom property invalid (so the var() fallback is taken), or to var(--kiba-stack-*-base) as the default emitted value for missing breakpoints.

Copilot uses AI. Check for mistakes.
'--kiba-stack-max-height-base': maxHeightResponsive?.base ?? 'none',
...responsiveValueToCss(maxHeightResponsive, '--kiba-stack-max-height', undefined, true),
'--kiba-stack-max-width-base': maxWidthResponsive?.base ?? 'none',
...responsiveValueToCss(maxWidthResponsive, '--kiba-stack-max-width', undefined, true),
'--kiba-stack-min-height-base': minHeightResponsive?.base ?? '0',
...responsiveValueToCss(minHeightResponsive, '--kiba-stack-min-height', undefined, true),
'--kiba-stack-min-width-base': minWidthResponsive?.base ?? '0',
...responsiveValueToCss(minWidthResponsive, '--kiba-stack-min-width', undefined, true),
...(shouldWrapItems && innerShouldAddGutters ? { '--kiba-stack-gap': getPaddingSizeCss(defaultGutter) } : {}),
...props.style,
} as React.CSSProperties;
Expand Down
64 changes: 32 additions & 32 deletions src/particles/box/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,43 +40,43 @@ export function Box({
isFullWidth = true,
...props
}: IBoxProps): React.ReactElement {
const height = props.height ?? props.heightResponsive?.base ?? (props.isFullHeight ? '100%' : 'auto');
const width = props.width ?? props.widthResponsive?.base ?? (isFullWidth ? '100%' : 'auto');
const height = props.height ?? props.heightResponsive?.base ?? (props.isFullHeight ? '100%' : undefined);
const width = props.width ?? props.widthResponsive?.base ?? (isFullWidth ? '100%' : undefined);
const blockType = width === '100%' ? 'block' : 'flex';
const combinedStyles: React.CSSProperties = {
...props.style,
// @ts-expect-error CSS custom properties are valid but not in CSSProperties type
'--kiba-box-display': blockType,
'--kiba-box-width': width,
'--kiba-box-width-sm': props.widthResponsive?.small,
'--kiba-box-width-md': props.widthResponsive?.medium,
'--kiba-box-width-lg': props.widthResponsive?.large,
'--kiba-box-width-xl': props.widthResponsive?.extraLarge,
'--kiba-box-height': height,
'--kiba-box-height-sm': props.heightResponsive?.small,
'--kiba-box-height-md': props.heightResponsive?.medium,
'--kiba-box-height-lg': props.heightResponsive?.large,
'--kiba-box-height-xl': props.heightResponsive?.extraLarge,
'--kiba-box-max-width': props.maxWidth,
'--kiba-box-max-width-sm': props.maxWidthResponsive?.small,
'--kiba-box-max-width-md': props.maxWidthResponsive?.medium,
'--kiba-box-max-width-lg': props.maxWidthResponsive?.large,
'--kiba-box-max-width-xl': props.maxWidthResponsive?.extraLarge,
'--kiba-box-max-height': props.maxHeight,
'--kiba-box-max-height-sm': props.maxHeightResponsive?.small,
'--kiba-box-max-height-md': props.maxHeightResponsive?.medium,
'--kiba-box-max-height-lg': props.maxHeightResponsive?.large,
'--kiba-box-max-height-xl': props.maxHeightResponsive?.extraLarge,
'--kiba-box-min-width': props.minWidth,
'--kiba-box-min-width-sm': props.minWidthResponsive?.small,
'--kiba-box-min-width-md': props.minWidthResponsive?.medium,
'--kiba-box-min-width-lg': props.minWidthResponsive?.large,
'--kiba-box-min-width-xl': props.minWidthResponsive?.extraLarge,
'--kiba-box-min-height': props.minHeight,
'--kiba-box-min-height-sm': props.minHeightResponsive?.small,
'--kiba-box-min-height-md': props.minHeightResponsive?.medium,
'--kiba-box-min-height-lg': props.minHeightResponsive?.large,
'--kiba-box-min-height-xl': props.minHeightResponsive?.extraLarge,
'--kiba-box-width': width ?? 'initial',
'--kiba-box-width-sm': props.widthResponsive?.small ?? 'initial',
'--kiba-box-width-md': props.widthResponsive?.medium ?? 'initial',
'--kiba-box-width-lg': props.widthResponsive?.large ?? 'initial',
'--kiba-box-width-xl': props.widthResponsive?.extraLarge ?? 'initial',
'--kiba-box-height': height ?? 'initial',
'--kiba-box-height-sm': props.heightResponsive?.small ?? 'initial',
'--kiba-box-height-md': props.heightResponsive?.medium ?? 'initial',
'--kiba-box-height-lg': props.heightResponsive?.large ?? 'initial',
'--kiba-box-height-xl': props.heightResponsive?.extraLarge ?? 'initial',
'--kiba-box-max-width': props.maxWidth ?? 'initial',
'--kiba-box-max-width-sm': props.maxWidthResponsive?.small ?? 'initial',
'--kiba-box-max-width-md': props.maxWidthResponsive?.medium ?? 'initial',
'--kiba-box-max-width-lg': props.maxWidthResponsive?.large ?? 'initial',
'--kiba-box-max-width-xl': props.maxWidthResponsive?.extraLarge ?? 'initial',
'--kiba-box-max-height': props.maxHeight ?? 'initial',
'--kiba-box-max-height-sm': props.maxHeightResponsive?.small ?? 'initial',
'--kiba-box-max-height-md': props.maxHeightResponsive?.medium ?? 'initial',
'--kiba-box-max-height-lg': props.maxHeightResponsive?.large ?? 'initial',
'--kiba-box-max-height-xl': props.maxHeightResponsive?.extraLarge ?? 'initial',
'--kiba-box-min-width': props.minWidth ?? 'initial',
'--kiba-box-min-width-sm': props.minWidthResponsive?.small ?? 'initial',
'--kiba-box-min-width-md': props.minWidthResponsive?.medium ?? 'initial',
'--kiba-box-min-width-lg': props.minWidthResponsive?.large ?? 'initial',
'--kiba-box-min-width-xl': props.minWidthResponsive?.extraLarge ?? 'initial',
'--kiba-box-min-height': props.minHeight ?? 'initial',
'--kiba-box-min-height-sm': props.minHeightResponsive?.small ?? 'initial',
'--kiba-box-min-height-md': props.minHeightResponsive?.medium ?? 'initial',
'--kiba-box-min-height-lg': props.minHeightResponsive?.large ?? 'initial',
'--kiba-box-min-height-xl': props.minHeightResponsive?.extraLarge ?? 'initial',
Comment on lines +51 to +79
Copy link

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Setting the responsive breakpoint variables to the literal string 'initial' (e.g. --kiba-box-width-sm: 'initial') breaks the fallback chain in box/styles.scss. At @include screen-small, width: var(--kiba-box-width-sm, var(--kiba-box-width, 100%)) will resolve to width: initial (auto) instead of falling back to the base width (often 100%).

This means a Box with no widthResponsive will unexpectedly stop being full-width at breakpoints.

To both prevent inheriting a parent Box’s responsive vars and preserve fallbacks, use an invalid-at-computed-time sentinel value (e.g. var(--kiba-unset) with no fallback) for the missing breakpoint variables, or only set breakpoint variables when explicitly provided.

Suggested change
'--kiba-box-width-sm': props.widthResponsive?.small ?? 'initial',
'--kiba-box-width-md': props.widthResponsive?.medium ?? 'initial',
'--kiba-box-width-lg': props.widthResponsive?.large ?? 'initial',
'--kiba-box-width-xl': props.widthResponsive?.extraLarge ?? 'initial',
'--kiba-box-height': height ?? 'initial',
'--kiba-box-height-sm': props.heightResponsive?.small ?? 'initial',
'--kiba-box-height-md': props.heightResponsive?.medium ?? 'initial',
'--kiba-box-height-lg': props.heightResponsive?.large ?? 'initial',
'--kiba-box-height-xl': props.heightResponsive?.extraLarge ?? 'initial',
'--kiba-box-max-width': props.maxWidth ?? 'initial',
'--kiba-box-max-width-sm': props.maxWidthResponsive?.small ?? 'initial',
'--kiba-box-max-width-md': props.maxWidthResponsive?.medium ?? 'initial',
'--kiba-box-max-width-lg': props.maxWidthResponsive?.large ?? 'initial',
'--kiba-box-max-width-xl': props.maxWidthResponsive?.extraLarge ?? 'initial',
'--kiba-box-max-height': props.maxHeight ?? 'initial',
'--kiba-box-max-height-sm': props.maxHeightResponsive?.small ?? 'initial',
'--kiba-box-max-height-md': props.maxHeightResponsive?.medium ?? 'initial',
'--kiba-box-max-height-lg': props.maxHeightResponsive?.large ?? 'initial',
'--kiba-box-max-height-xl': props.maxHeightResponsive?.extraLarge ?? 'initial',
'--kiba-box-min-width': props.minWidth ?? 'initial',
'--kiba-box-min-width-sm': props.minWidthResponsive?.small ?? 'initial',
'--kiba-box-min-width-md': props.minWidthResponsive?.medium ?? 'initial',
'--kiba-box-min-width-lg': props.minWidthResponsive?.large ?? 'initial',
'--kiba-box-min-width-xl': props.minWidthResponsive?.extraLarge ?? 'initial',
'--kiba-box-min-height': props.minHeight ?? 'initial',
'--kiba-box-min-height-sm': props.minHeightResponsive?.small ?? 'initial',
'--kiba-box-min-height-md': props.minHeightResponsive?.medium ?? 'initial',
'--kiba-box-min-height-lg': props.minHeightResponsive?.large ?? 'initial',
'--kiba-box-min-height-xl': props.minHeightResponsive?.extraLarge ?? 'initial',
'--kiba-box-width-sm': props.widthResponsive?.small ?? 'var(--kiba-unset)',
'--kiba-box-width-md': props.widthResponsive?.medium ?? 'var(--kiba-unset)',
'--kiba-box-width-lg': props.widthResponsive?.large ?? 'var(--kiba-unset)',
'--kiba-box-width-xl': props.widthResponsive?.extraLarge ?? 'var(--kiba-unset)',
'--kiba-box-height': height ?? 'initial',
'--kiba-box-height-sm': props.heightResponsive?.small ?? 'var(--kiba-unset)',
'--kiba-box-height-md': props.heightResponsive?.medium ?? 'var(--kiba-unset)',
'--kiba-box-height-lg': props.heightResponsive?.large ?? 'var(--kiba-unset)',
'--kiba-box-height-xl': props.heightResponsive?.extraLarge ?? 'var(--kiba-unset)',
'--kiba-box-max-width': props.maxWidth ?? 'initial',
'--kiba-box-max-width-sm': props.maxWidthResponsive?.small ?? 'var(--kiba-unset)',
'--kiba-box-max-width-md': props.maxWidthResponsive?.medium ?? 'var(--kiba-unset)',
'--kiba-box-max-width-lg': props.maxWidthResponsive?.large ?? 'var(--kiba-unset)',
'--kiba-box-max-width-xl': props.maxWidthResponsive?.extraLarge ?? 'var(--kiba-unset)',
'--kiba-box-max-height': props.maxHeight ?? 'initial',
'--kiba-box-max-height-sm': props.maxHeightResponsive?.small ?? 'var(--kiba-unset)',
'--kiba-box-max-height-md': props.maxHeightResponsive?.medium ?? 'var(--kiba-unset)',
'--kiba-box-max-height-lg': props.maxHeightResponsive?.large ?? 'var(--kiba-unset)',
'--kiba-box-max-height-xl': props.maxHeightResponsive?.extraLarge ?? 'var(--kiba-unset)',
'--kiba-box-min-width': props.minWidth ?? 'initial',
'--kiba-box-min-width-sm': props.minWidthResponsive?.small ?? 'var(--kiba-unset)',
'--kiba-box-min-width-md': props.minWidthResponsive?.medium ?? 'var(--kiba-unset)',
'--kiba-box-min-width-lg': props.minWidthResponsive?.large ?? 'var(--kiba-unset)',
'--kiba-box-min-width-xl': props.minWidthResponsive?.extraLarge ?? 'var(--kiba-unset)',
'--kiba-box-min-height': props.minHeight ?? 'initial',
'--kiba-box-min-height-sm': props.minHeightResponsive?.small ?? 'var(--kiba-unset)',
'--kiba-box-min-height-md': props.minHeightResponsive?.medium ?? 'var(--kiba-unset)',
'--kiba-box-min-height-lg': props.minHeightResponsive?.large ?? 'var(--kiba-unset)',
'--kiba-box-min-height-xl': props.minHeightResponsive?.extraLarge ?? 'var(--kiba-unset)',

Copilot uses AI. Check for mistakes.
zIndex: props.zIndex,
position: props.position as React.CSSProperties['position'],
};
Expand Down
34 changes: 17 additions & 17 deletions src/particles/box/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,41 +88,41 @@
&.scrollableVertically { overflow-y: auto; }
&.scrollableHorizontally { overflow-x: auto; }

// Responsive breakpoints
// Responsive breakpoints - only use responsive variables if explicitly set (not initial)
@include screen-small {
width: var(--kiba-box-width-sm, var(--kiba-box-width, 100%));
height: var(--kiba-box-height-sm, var(--kiba-box-height, auto));
max-width: var(--kiba-box-max-width-sm, var(--kiba-box-max-width));
max-height: var(--kiba-box-max-height-sm, var(--kiba-box-max-height));
min-width: var(--kiba-box-min-width-sm, var(--kiba-box-min-width));
min-height: var(--kiba-box-min-height-sm, var(--kiba-box-min-height));
max-width: var(--kiba-box-max-width-sm, var(--kiba-box-max-width, none));
max-height: var(--kiba-box-max-height-sm, var(--kiba-box-max-height, none));
Comment on lines +91 to +96
Copy link

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new comment says responsive variables are only used if explicitly set (not initial), but the CSS here still uses plain var(--kiba-box-*-sm, ...) fallbacks and cannot detect whether the variable’s value is the keyword initial. As a result, if components set --kiba-box-*-sm: initial, the breakpoint will still use it and override the intended fallback.

Either adjust the implementation so the unset sentinel triggers the fallback (e.g. set the variable to an invalid computed value), or update/remove this comment to match actual behavior.

Copilot uses AI. Check for mistakes.
min-width: var(--kiba-box-min-width-sm, var(--kiba-box-min-width, 0));
min-height: var(--kiba-box-min-height-sm, var(--kiba-box-min-height, 0));
}

@include screen-medium {
width: var(--kiba-box-width-md, var(--kiba-box-width-sm, var(--kiba-box-width, 100%)));
height: var(--kiba-box-height-md, var(--kiba-box-height-sm, var(--kiba-box-height, auto)));
max-width: var(--kiba-box-max-width-md, var(--kiba-box-max-width-sm, var(--kiba-box-max-width)));
max-height: var(--kiba-box-max-height-md, var(--kiba-box-max-height-sm, var(--kiba-box-max-height)));
min-width: var(--kiba-box-min-width-md, var(--kiba-box-min-width-sm, var(--kiba-box-min-width)));
min-height: var(--kiba-box-min-height-md, var(--kiba-box-min-height-sm, var(--kiba-box-min-height)));
max-width: var(--kiba-box-max-width-md, var(--kiba-box-max-width-sm, var(--kiba-box-max-width, none)));
max-height: var(--kiba-box-max-height-md, var(--kiba-box-max-height-sm, var(--kiba-box-max-height, none)));
min-width: var(--kiba-box-min-width-md, var(--kiba-box-min-width-sm, var(--kiba-box-min-width, 0)));
min-height: var(--kiba-box-min-height-md, var(--kiba-box-min-height-sm, var(--kiba-box-min-height, 0)));
}

@include screen-large {
width: var(--kiba-box-width-lg, var(--kiba-box-width-md, var(--kiba-box-width-sm, var(--kiba-box-width, 100%))));
height: var(--kiba-box-height-lg, var(--kiba-box-height-md, var(--kiba-box-height-sm, var(--kiba-box-height, auto))));
max-width: var(--kiba-box-max-width-lg, var(--kiba-box-max-width-md, var(--kiba-box-max-width-sm, var(--kiba-box-max-width))));
max-height: var(--kiba-box-max-height-lg, var(--kiba-box-max-height-md, var(--kiba-box-max-height-sm, var(--kiba-box-max-height))));
min-width: var(--kiba-box-min-width-lg, var(--kiba-box-min-width-md, var(--kiba-box-min-width-sm, var(--kiba-box-min-width))));
min-height: var(--kiba-box-min-height-lg, var(--kiba-box-min-height-md, var(--kiba-box-min-height-sm, var(--kiba-box-min-height))));
max-width: var(--kiba-box-max-width-lg, var(--kiba-box-max-width-md, var(--kiba-box-max-width-sm, var(--kiba-box-max-width, none))));
max-height: var(--kiba-box-max-height-lg, var(--kiba-box-max-height-md, var(--kiba-box-max-height-sm, var(--kiba-box-max-height, none))));
min-width: var(--kiba-box-min-width-lg, var(--kiba-box-min-width-md, var(--kiba-box-min-width-sm, var(--kiba-box-min-width, 0))));
min-height: var(--kiba-box-min-height-lg, var(--kiba-box-min-height-md, var(--kiba-box-min-height-sm, var(--kiba-box-min-height, 0))));
}

@include screen-extra-large {
width: var(--kiba-box-width-xl, var(--kiba-box-width-lg, var(--kiba-box-width-md, var(--kiba-box-width-sm, var(--kiba-box-width, 100%)))));
height: var(--kiba-box-height-xl, var(--kiba-box-height-lg, var(--kiba-box-height-md, var(--kiba-box-height-sm, var(--kiba-box-height, auto)))));
max-width: var(--kiba-box-max-width-xl, var(--kiba-box-max-width-lg, var(--kiba-box-max-width-md, var(--kiba-box-max-width-sm, var(--kiba-box-max-width)))));
max-height: var(--kiba-box-max-height-xl, var(--kiba-box-max-height-lg, var(--kiba-box-max-height-md, var(--kiba-box-max-height-sm, var(--kiba-box-max-height)))));
min-width: var(--kiba-box-min-width-xl, var(--kiba-box-min-width-lg, var(--kiba-box-min-width-md, var(--kiba-box-min-width-sm, var(--kiba-box-min-width)))));
min-height: var(--kiba-box-min-height-xl, var(--kiba-box-min-height-lg, var(--kiba-box-min-height-md, var(--kiba-box-min-height-sm, var(--kiba-box-min-height)))));
max-width: var(--kiba-box-max-width-xl, var(--kiba-box-max-width-lg, var(--kiba-box-max-width-md, var(--kiba-box-max-width-sm, var(--kiba-box-max-width, none)))));
max-height: var(--kiba-box-max-height-xl, var(--kiba-box-max-height-lg, var(--kiba-box-max-height-md, var(--kiba-box-max-height-sm, var(--kiba-box-max-height, none)))));
min-width: var(--kiba-box-min-width-xl, var(--kiba-box-min-width-lg, var(--kiba-box-min-width-md, var(--kiba-box-min-width-sm, var(--kiba-box-min-width, 0)))));
min-height: var(--kiba-box-min-height-xl, var(--kiba-box-min-height-lg, var(--kiba-box-min-height-md, var(--kiba-box-min-height-sm, var(--kiba-box-min-height, 0)))));
}
}
}
Expand Down
25 changes: 13 additions & 12 deletions src/util/responsiveUtil.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,23 @@ export const responsiveValueToCss = <FieldType>(
field: ResponsiveField<FieldType> | null | undefined,
variablePrefix: string,
converter: CssConverter<FieldType> = identityConverter,
shouldResetInheritance = false,
): Record<string, string> => {
if (!field) {
if (shouldResetInheritance) {
return {
[`${variablePrefix}-small`]: 'initial',
[`${variablePrefix}-medium`]: 'initial',
[`${variablePrefix}-large`]: 'initial',
[`${variablePrefix}-extraLarge`]: 'initial',
};
}
return {};
}
const result: Record<string, string> = {};
if (field.small !== undefined) {
result[`${variablePrefix}-small`] = converter(field.small);
}
if (field.medium !== undefined) {
result[`${variablePrefix}-medium`] = converter(field.medium);
}
if (field.large !== undefined) {
result[`${variablePrefix}-large`] = converter(field.large);
}
if (field.extraLarge !== undefined) {
result[`${variablePrefix}-extraLarge`] = converter(field.extraLarge);
}
result[`${variablePrefix}-small`] = field.small !== undefined ? converter(field.small) : 'initial';
result[`${variablePrefix}-medium`] = field.medium !== undefined ? converter(field.medium) : 'initial';
result[`${variablePrefix}-large`] = field.large !== undefined ? converter(field.large) : 'initial';
result[`${variablePrefix}-extraLarge`] = field.extraLarge !== undefined ? converter(field.extraLarge) : 'initial';
Comment on lines +20 to +34
Copy link

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using the literal string 'initial' as the value for missing responsive custom properties prevents var(--x, fallback) from falling back (because the variable is defined and resolves to the keyword initial). This changes behavior: e.g. consumers will get flex-direction: initial / justify-content: initial / width: initial at breakpoints instead of inheriting the *-base value or the fallback.

If the intent is to both (a) stop inheriting parent custom properties and (b) still trigger the var() fallback, set missing breakpoint variables to a value that becomes invalid at computed-value time (commonly var(--kiba-unset) with no fallback), or avoid emitting the property entirely when inheritance reset isn't needed. With an invalid value, var(--x, fallback) will use the fallback while still overriding inheritance on the element.

Copilot uses AI. Check for mistakes.
return result;
};
Loading