From 57cb49f2f8b7ae0309b12ad56873f475f939768a Mon Sep 17 00:00:00 2001 From: Krishan Patel Date: Fri, 30 Jan 2026 14:29:04 +0000 Subject: [PATCH 1/2] . --- src/layouts/stack/component.tsx | 22 +++++++----- src/particles/box/component.tsx | 64 ++++++++++++++++----------------- src/particles/box/styles.scss | 34 +++++++++--------- src/util/responsiveUtil.ts | 25 ++++++------- 4 files changed, 75 insertions(+), 70 deletions(-) diff --git a/src/layouts/stack/component.tsx b/src/layouts/stack/component.tsx index abec0689..0ea39ec1 100644 --- a/src/layouts/stack/component.tsx +++ b/src/layouts/stack/component.tsx @@ -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), + '--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; diff --git a/src/particles/box/component.tsx b/src/particles/box/component.tsx index de74420e..4c3a6312 100644 --- a/src/particles/box/component.tsx +++ b/src/particles/box/component.tsx @@ -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', zIndex: props.zIndex, position: props.position as React.CSSProperties['position'], }; diff --git a/src/particles/box/styles.scss b/src/particles/box/styles.scss index f9193301..bbc6199f 100644 --- a/src/particles/box/styles.scss +++ b/src/particles/box/styles.scss @@ -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)); + 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))))); } } } diff --git a/src/util/responsiveUtil.ts b/src/util/responsiveUtil.ts index 122f5883..f4ead937 100644 --- a/src/util/responsiveUtil.ts +++ b/src/util/responsiveUtil.ts @@ -14,22 +14,23 @@ export const responsiveValueToCss = ( field: ResponsiveField | null | undefined, variablePrefix: string, converter: CssConverter = identityConverter, + shouldResetInheritance = false, ): Record => { if (!field) { + if (shouldResetInheritance) { + return { + [`${variablePrefix}-small`]: 'initial', + [`${variablePrefix}-medium`]: 'initial', + [`${variablePrefix}-large`]: 'initial', + [`${variablePrefix}-extraLarge`]: 'initial', + }; + } return {}; } const result: Record = {}; - 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'; return result; }; From 9b38ad7abe1e88314f7efdee34c3bc6b1f9e1195 Mon Sep 17 00:00:00 2001 From: Krishan Patel Date: Fri, 30 Jan 2026 14:30:33 +0000 Subject: [PATCH 2/2] . --- src/layouts/grid/component.tsx | 26 +++++++++----------------- 1 file changed, 9 insertions(+), 17 deletions(-) diff --git a/src/layouts/grid/component.tsx b/src/layouts/grid/component.tsx index 345b385b..b4d053fa 100644 --- a/src/layouts/grid/component.tsx +++ b/src/layouts/grid/component.tsx @@ -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), @@ -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 (