From 3c19ed993cb00d495bf28830ae6f2efa4e6f4b92 Mon Sep 17 00:00:00 2001 From: Krishan Patel Date: Fri, 30 Jan 2026 15:19:59 +0000 Subject: [PATCH 1/4] Fix: prevent CSS variable inheritance in Box/Stack using @property --- src/styles/global.scss | 73 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) diff --git a/src/styles/global.scss b/src/styles/global.scss index 320dbc4a..98441b31 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -5,6 +5,79 @@ // These are in the kiba-reset layer so component styles in kiba-theme // will always take precedence. +// ============================================================================= +// CSS @property declarations for non-inheriting custom properties +// ============================================================================= +// By default, CSS custom properties (variables) inherit from parent elements. +// This causes issues when a parent Box/Stack sets responsive sizing variables +// (e.g. --kiba-box-height-md: 300px) - all child components would inherit +// and use these values even if they didn't set their own. +// +// Using @property with `inherits: false` prevents this cascade, ensuring each +// component instance only uses the variables it explicitly sets on itself. +// Browser support: Chrome 85+, Safari 15.4+, Firefox 128+ (universal by 2024) +@property --kiba-box-width { syntax: "*"; inherits: false; } +@property --kiba-box-width-sm { syntax: "*"; inherits: false; } +@property --kiba-box-width-md { syntax: "*"; inherits: false; } +@property --kiba-box-width-lg { syntax: "*"; inherits: false; } +@property --kiba-box-width-xl { syntax: "*"; inherits: false; } +@property --kiba-box-height { syntax: "*"; inherits: false; } +@property --kiba-box-height-sm { syntax: "*"; inherits: false; } +@property --kiba-box-height-md { syntax: "*"; inherits: false; } +@property --kiba-box-height-lg { syntax: "*"; inherits: false; } +@property --kiba-box-height-xl { syntax: "*"; inherits: false; } +@property --kiba-box-max-width { syntax: "*"; inherits: false; } +@property --kiba-box-max-width-sm { syntax: "*"; inherits: false; } +@property --kiba-box-max-width-md { syntax: "*"; inherits: false; } +@property --kiba-box-max-width-lg { syntax: "*"; inherits: false; } +@property --kiba-box-max-width-xl { syntax: "*"; inherits: false; } +@property --kiba-box-max-height { syntax: "*"; inherits: false; } +@property --kiba-box-max-height-sm { syntax: "*"; inherits: false; } +@property --kiba-box-max-height-md { syntax: "*"; inherits: false; } +@property --kiba-box-max-height-lg { syntax: "*"; inherits: false; } +@property --kiba-box-max-height-xl { syntax: "*"; inherits: false; } +@property --kiba-box-min-width { syntax: "*"; inherits: false; } +@property --kiba-box-min-width-sm { syntax: "*"; inherits: false; } +@property --kiba-box-min-width-md { syntax: "*"; inherits: false; } +@property --kiba-box-min-width-lg { syntax: "*"; inherits: false; } +@property --kiba-box-min-width-xl { syntax: "*"; inherits: false; } +@property --kiba-box-min-height { syntax: "*"; inherits: false; } +@property --kiba-box-min-height-sm { syntax: "*"; inherits: false; } +@property --kiba-box-min-height-md { syntax: "*"; inherits: false; } +@property --kiba-box-min-height-lg { syntax: "*"; inherits: false; } +@property --kiba-box-min-height-xl { syntax: "*"; inherits: false; } + +@property --kiba-stack-height-base { syntax: "*"; inherits: false; } +@property --kiba-stack-height-small { syntax: "*"; inherits: false; } +@property --kiba-stack-height-medium { syntax: "*"; inherits: false; } +@property --kiba-stack-height-large { syntax: "*"; inherits: false; } +@property --kiba-stack-height-extraLarge { syntax: "*"; inherits: false; } +@property --kiba-stack-width-base { syntax: "*"; inherits: false; } +@property --kiba-stack-width-small { syntax: "*"; inherits: false; } +@property --kiba-stack-width-medium { syntax: "*"; inherits: false; } +@property --kiba-stack-width-large { syntax: "*"; inherits: false; } +@property --kiba-stack-width-extraLarge { syntax: "*"; inherits: false; } +@property --kiba-stack-max-height-base { syntax: "*"; inherits: false; } +@property --kiba-stack-max-height-small { syntax: "*"; inherits: false; } +@property --kiba-stack-max-height-medium { syntax: "*"; inherits: false; } +@property --kiba-stack-max-height-large { syntax: "*"; inherits: false; } +@property --kiba-stack-max-height-extraLarge { syntax: "*"; inherits: false; } +@property --kiba-stack-max-width-base { syntax: "*"; inherits: false; } +@property --kiba-stack-max-width-small { syntax: "*"; inherits: false; } +@property --kiba-stack-max-width-medium { syntax: "*"; inherits: false; } +@property --kiba-stack-max-width-large { syntax: "*"; inherits: false; } +@property --kiba-stack-max-width-extraLarge { syntax: "*"; inherits: false; } +@property --kiba-stack-min-height-base { syntax: "*"; inherits: false; } +@property --kiba-stack-min-height-small { syntax: "*"; inherits: false; } +@property --kiba-stack-min-height-medium { syntax: "*"; inherits: false; } +@property --kiba-stack-min-height-large { syntax: "*"; inherits: false; } +@property --kiba-stack-min-height-extraLarge { syntax: "*"; inherits: false; } +@property --kiba-stack-min-width-base { syntax: "*"; inherits: false; } +@property --kiba-stack-min-width-small { syntax: "*"; inherits: false; } +@property --kiba-stack-min-width-medium { syntax: "*"; inherits: false; } +@property --kiba-stack-min-width-large { syntax: "*"; inherits: false; } +@property --kiba-stack-min-width-extraLarge { syntax: "*"; inherits: false; } + @layer kiba-reset { html { scroll-behavior: smooth; From 81846545be0038114e7c2bc298d1c7b12ef20feb Mon Sep 17 00:00:00 2001 From: Krishan Patel Date: Fri, 30 Jan 2026 15:20:33 +0000 Subject: [PATCH 2/4] . --- CHANGELOG.md | 3 +- src/layouts/grid/component.tsx | 26 +++++++++----- src/layouts/stack/component.tsx | 26 ++++++-------- src/particles/box/component.tsx | 64 ++++++++++++++++----------------- src/particles/box/styles.scss | 34 +++++++++--------- src/util/responsiveUtil.ts | 25 +++++++------ 6 files changed, 90 insertions(+), 88 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f50cfc4f..5ac871e4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,8 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) ### Added ### Changed -- [MINOR] Correction for using `sizeResponsive.base` size in `EqualGrid` -- [MINOR] Correction for using `heightResponsive.base`, `widthResponsive.base` size in `EqualGrid`, `Box` and `Stack` +- [MINOR] Correction for using `childSizeResponsive.base` size in `EqualGrid` ### Removed diff --git a/src/layouts/grid/component.tsx b/src/layouts/grid/component.tsx index b4d053fa..345b385b 100644 --- a/src/layouts/grid/component.tsx +++ b/src/layouts/grid/component.tsx @@ -87,6 +87,7 @@ 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), @@ -95,15 +96,22 @@ export function Grid({ '--kiba-grid-item-height': '100%', '--kiba-grid-item-overflow-y': 'auto', } : {}), - // @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', + ...(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), + } : {}), }; return (
( 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 = {}; - 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'; + 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); + } return result; }; From a992ecb1be2a88ef617747a78e030401423d2a20 Mon Sep 17 00:00:00 2001 From: Krishan Patel Date: Fri, 30 Jan 2026 15:21:36 +0000 Subject: [PATCH 3/4] . --- src/layouts/stack/component.tsx | 12 ++++++------ src/particles/box/component.tsx | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/layouts/stack/component.tsx b/src/layouts/stack/component.tsx index 8360a0be..19014b9b 100644 --- a/src/layouts/stack/component.tsx +++ b/src/layouts/stack/component.tsx @@ -146,12 +146,12 @@ export function Stack({ const paddingBottom = (props.paddingEnd && direction === Direction.Vertical) ? props.paddingEnd : undefined; const paddingLeft = (props.paddingStart && direction === Direction.Horizontal) ? props.paddingStart : undefined; const paddingRight = (props.paddingEnd && direction === Direction.Horizontal) ? props.paddingEnd : undefined; - const height = props.height || (isFullHeight ? '100%' : 'auto'); - const width = props.width || (isFullWidth ? '100%' : 'auto'); - const maxHeight = props.maxHeight ?? null; - const maxWidth = props.maxWidth ?? null; - const minHeight = props.minHeight ?? null; - const minWidth = props.minWidth ?? null; + const height = props.height ?? props.heightResponsive?.base ?? (isFullHeight ? '100%' : 'auto'); + const width = props.width ?? props.widthResponsive?.base ?? (isFullWidth ? '100%' : 'auto'); + const maxHeight = props.maxHeight ?? props.maxHeightResponsive?.base ?? null; + const maxWidth = props.maxWidth ?? props.maxWidthResponsive?.base ?? null; + const minHeight = props.minHeight ?? props.minHeightResponsive?.base ?? null; + const minWidth = props.minWidth ?? props.minWidthResponsive?.base ?? null; const maxHeightResponsive = props.maxHeightResponsive || maxHeight ? { base: (maxHeight || undefined), ...props.maxHeightResponsive } : null; const maxWidthResponsive = props.maxWidthResponsive || maxWidth ? { base: (maxWidth || undefined), ...props.maxWidthResponsive } : null; const minHeightResponsive = props.minHeightResponsive || minHeight ? { base: (minHeight || undefined), ...props.minHeightResponsive } : null; diff --git a/src/particles/box/component.tsx b/src/particles/box/component.tsx index fed0bd48..de74420e 100644 --- a/src/particles/box/component.tsx +++ b/src/particles/box/component.tsx @@ -40,8 +40,8 @@ export function Box({ isFullWidth = true, ...props }: IBoxProps): React.ReactElement { - const height = props.height || (props.isFullHeight ? '100%' : 'auto'); - const width = props.width || (isFullWidth ? '100%' : 'auto'); + const height = props.height ?? props.heightResponsive?.base ?? (props.isFullHeight ? '100%' : 'auto'); + const width = props.width ?? props.widthResponsive?.base ?? (isFullWidth ? '100%' : 'auto'); const blockType = width === '100%' ? 'block' : 'flex'; const combinedStyles: React.CSSProperties = { ...props.style, From 507fb72112d0372ec91f6533f8a527258a33c16c Mon Sep 17 00:00:00 2001 From: Krishan Patel Date: Fri, 30 Jan 2026 15:23:34 +0000 Subject: [PATCH 4/4] . --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5ac871e4..f4a0cd67 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) ### Changed - [MINOR] Correction for using `childSizeResponsive.base` size in `EqualGrid` +- [MINOR] Fix `Box` and `Stack` to not inherit sizing props from parent when not intended ### Removed