From 4791c8fb1f92d93cc4100628dba5c395ad145d08 Mon Sep 17 00:00:00 2001 From: Kamil Emeleev Date: Mon, 10 Aug 2026 12:50:36 +0300 Subject: [PATCH 1/3] fix(components): move CSS variable defaults to private variables (DS-5396) --- AGENTS.md | 17 +++++++ .../components/src/components/Flag/Flag.mdx | 14 +++--- .../src/components/Flag/Flag.module.css | 24 +++++----- .../src/components/Sidebar/Sidebar.mdx | 14 +++--- .../src/components/Sidebar/Sidebar.module.css | 22 ++++++---- .../src/components/TopBar/TopBar.mdx | 30 ++++++------- .../src/components/TopBar/TopBar.module.css | 44 +++++++++---------- .../src/components/TopBar/TopBar.stories.tsx | 4 +- .../TopBarContainer.module.css | 11 ++--- .../TopBarTitle/TopBarTitle.module.css | 4 +- 10 files changed, 105 insertions(+), 79 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 5f5632b9..c179d169 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -135,6 +135,23 @@ Some complex components may also contain `components/`, `utils.ts`, `intl.ts` or - Only use CSS features supported by the project's [browserslist](package.json) targets. - Mostly plain CSS. Mixins are used for typography and text ellipsis (`packages/components/src/styles/mixins.css`). +### Component CSS Variables + +Private `---*` variables define defaults. +Public `--kbq--*` variables are override points. + +```css +/* TopBar.module.css */ +.base { + --topbar-gap: 80px; + + gap: var(--kbq-topbar-gap, var(--topbar-gap)); +} +``` + +- Never define public variables in component CSS. +- Public variables inherit, allowing parents to style nested components. + ### Prop System - Prefer standard ARIA attributes and existing prop names to keep component APIs consistent and familiar. diff --git a/packages/components/src/components/Flag/Flag.mdx b/packages/components/src/components/Flag/Flag.mdx index 4d7a4220..63cafd62 100644 --- a/packages/components/src/components/Flag/Flag.mdx +++ b/packages/components/src/components/Flag/Flag.mdx @@ -121,10 +121,10 @@ and add a shadow/gradient in your own styles. Everything visual that isn't a discrete state is an overridable CSS variable: -| Variable | Default | Purpose | -| ----------------------------- | --------------------------------------- | ----------------------------------------------------- | -| `--kbq-flag-size` | `1em` | Flag height (also settable via the `size` prop). | -| `--kbq-flag-aspect-ratio` | `3 / 2` | Box ratio (also settable via the `aspectRatio` prop). | -| `--kbq-flag-border-radius` | `0` | Corner radius (rounded / stylized look). | -| `--kbq-flag-shadow-color` | `var(--kbq-line-contrast-fade)` | Inset hairline color; theme-adaptive. | -| `--kbq-flag-empty-background` | `var(--kbq-states-background-disabled)` | Placeholder fill. | +| Variable | Purpose | +| ----------------------------- | ----------------------------------------------------- | +| `--kbq-flag-size` | Flag height (also settable via the `size` prop). | +| `--kbq-flag-aspect-ratio` | Box ratio (also settable via the `aspectRatio` prop). | +| `--kbq-flag-border-radius` | Corner radius (rounded / stylized look). | +| `--kbq-flag-shadow-color` | Inset hairline color; theme-adaptive. | +| `--kbq-flag-empty-background` | Placeholder fill. | diff --git a/packages/components/src/components/Flag/Flag.module.css b/packages/components/src/components/Flag/Flag.module.css index 5663403e..e7c1266f 100644 --- a/packages/components/src/components/Flag/Flag.module.css +++ b/packages/components/src/components/Flag/Flag.module.css @@ -1,17 +1,18 @@ .base { - /* Public, overridable knobs (see the component docs). */ - --kbq-flag-aspect-ratio: 3 / 2; - --kbq-flag-border-radius: 0; - --kbq-flag-shadow-color: var(--kbq-line-contrast-fade); - --kbq-flag-empty-background: var(--kbq-states-background-disabled); + /* Defaults for the public `--kbq-flag-*` knobs (see the component docs). */ + --flag-size: 1em; + --flag-aspect-ratio: 3 / 2; + --flag-border-radius: 0; + --flag-shadow-color: var(--kbq-line-contrast-fade); + --flag-empty-background: var(--kbq-states-background-disabled); display: inline-block; position: relative; overflow: hidden; vertical-align: middle; - block-size: var(--kbq-flag-size, 1em); - aspect-ratio: var(--kbq-flag-aspect-ratio); - border-radius: var(--kbq-flag-border-radius); + block-size: var(--kbq-flag-size, var(--flag-size)); + aspect-ratio: var(--kbq-flag-aspect-ratio, var(--flag-aspect-ratio)); + border-radius: var(--kbq-flag-border-radius, var(--flag-border-radius)); } /* The projected flag graphic fills the box (descendant selector supports wrapped graphics). */ @@ -28,7 +29,7 @@ position: absolute; inset: 0; border-radius: inherit; - border: 1px solid var(--kbq-flag-shadow-color); + border: 1px solid var(--kbq-flag-shadow-color, var(--flag-shadow-color)); pointer-events: none; } @@ -43,5 +44,8 @@ /* No projected graphic → neutral placeholder (e.g. unknown/invalid country). */ .base:empty { - background-color: var(--kbq-flag-empty-background); + background-color: var( + --kbq-flag-empty-background, + var(--flag-empty-background) + ); } diff --git a/packages/components/src/components/Sidebar/Sidebar.mdx b/packages/components/src/components/Sidebar/Sidebar.mdx index 244df0cf..60f881c1 100644 --- a/packages/components/src/components/Sidebar/Sidebar.mdx +++ b/packages/components/src/components/Sidebar/Sidebar.mdx @@ -90,9 +90,11 @@ A Sidebar has no ARIA role by default: ## CSS variables -| Variable | Default | Purpose | -| ------------------------------ | ------- | ---------------------------------------------------------- | -| `--kbq-sidebar-size` | `240px` | Inline size while open (also settable via `size`). | -| `--kbq-sidebar-closed-size` | `32px` | Inline size while closed (also settable via `closedSize`). | -| `--kbq-sidebar-open-duration` | `200ms` | Duration of the expand animation. | -| `--kbq-sidebar-close-duration` | `100ms` | Duration of the collapse animation. | +These optional variables override the component's internal values. + +| Variable | Purpose | +| ------------------------------ | ---------------------------------------------------------- | +| `--kbq-sidebar-size` | Inline size while open (also settable via `size`). | +| `--kbq-sidebar-closed-size` | Inline size while closed (also settable via `closedSize`). | +| `--kbq-sidebar-open-duration` | Duration of the expand animation. | +| `--kbq-sidebar-close-duration` | Duration of the collapse animation. | diff --git a/packages/components/src/components/Sidebar/Sidebar.module.css b/packages/components/src/components/Sidebar/Sidebar.module.css index 73f5f7b1..56f777fc 100644 --- a/packages/components/src/components/Sidebar/Sidebar.module.css +++ b/packages/components/src/components/Sidebar/Sidebar.module.css @@ -1,8 +1,8 @@ .base { - --kbq-sidebar-size: 240px; - --kbq-sidebar-closed-size: 32px; - --kbq-sidebar-open-duration: 200ms; - --kbq-sidebar-close-duration: 100ms; + --sidebar-size: 240px; + --sidebar-closed-size: 32px; + --sidebar-open-duration: 200ms; + --sidebar-close-duration: 100ms; display: flex; overflow: hidden; @@ -10,7 +10,10 @@ block-size: 100%; interpolate-size: allow-keywords; /* Kept for future intrinsic-size transition support. */ transition: inline-size var(--kbq-transition-slow); - transition-duration: var(--kbq-sidebar-close-duration); + transition-duration: var( + --kbq-sidebar-close-duration, + var(--sidebar-close-duration) + ); } .base[data-placement='end'] { @@ -19,15 +22,18 @@ /* animation */ .base[data-transition='entering'] { - transition-duration: var(--kbq-sidebar-open-duration); + transition-duration: var( + --kbq-sidebar-open-duration, + var(--sidebar-open-duration) + ); } .base[data-transition='entering'], .base[data-transition='entered'] { - inline-size: var(--kbq-sidebar-size); + inline-size: var(--kbq-sidebar-size, var(--sidebar-size)); } .base[data-transition='exiting'], .base[data-transition='exited'] { - inline-size: var(--kbq-sidebar-closed-size); + inline-size: var(--kbq-sidebar-closed-size, var(--sidebar-closed-size)); } diff --git a/packages/components/src/components/TopBar/TopBar.mdx b/packages/components/src/components/TopBar/TopBar.mdx index 4ce21242..74465b8f 100644 --- a/packages/components/src/components/TopBar/TopBar.mdx +++ b/packages/components/src/components/TopBar/TopBar.mdx @@ -44,7 +44,7 @@ The bar holds one container per side. Render only the ones you need. `placement="end"` sticks to the opposite edge. - `TopBar.Title` — the page heading. It renders an `h1` and cuts long text with an ellipsis. -By default, TopBar keeps at least `80px` between the two sides. Use `--kbq-top-bar-gap` to override +By default, TopBar keeps at least `80px` between the two sides. Use `--kbq-topbar-gap` to override it. ## Props @@ -96,20 +96,20 @@ the container gap and TopBar inline padding, so Breadcrumbs collapse before the These optional variables override the component's internal values. -| Variable | Purpose | -| ----------------------------------------------- | --------------------------------------------------- | -| `--kbq-top-bar-background` | Background of the bar. | -| `--kbq-top-bar-padding-block` | Block padding. | -| `--kbq-top-bar-padding-inline` | Inline padding. | -| `--kbq-top-bar-border-radius` | Border radius. | -| `--kbq-top-bar-min-block-size` | Minimum block size of the bar. | -| `--kbq-top-bar-gap` | Minimum distance between the two sides. | -| `--kbq-top-bar-z-index` | Stack order while `sticky`. | -| `--kbq-top-bar-shadow` | Shadow shown by `hasShadow`. | -| `--kbq-top-bar-container-start-gap` | Gap between items in the start container. | -| `--kbq-top-bar-container-start-min-inline-size` | Width the start container keeps for itself. | -| `--kbq-top-bar-container-end-gap` | Gap between items in the end container. | -| `--kbq-top-bar-title-min-inline-size` | Smallest width of the title before the end shrinks. | +| Variable | Purpose | +| ---------------------------------------------- | --------------------------------------------------- | +| `--kbq-topbar-background` | Background of the bar. | +| `--kbq-topbar-padding-block` | Block padding. | +| `--kbq-topbar-padding-inline` | Inline padding. | +| `--kbq-topbar-border-radius` | Border radius. | +| `--kbq-topbar-min-block-size` | Minimum block size of the bar. | +| `--kbq-topbar-gap` | Minimum distance between the two sides. | +| `--kbq-topbar-z-index` | Stack order while `sticky`. | +| `--kbq-topbar-shadow` | Shadow shown by `hasShadow`. | +| `--kbq-topbar-container-start-gap` | Gap between items in the start container. | +| `--kbq-topbar-container-start-min-inline-size` | Width the start container keeps for itself. | +| `--kbq-topbar-container-end-gap` | Gap between items in the end container. | +| `--kbq-topbar-title-min-inline-size` | Smallest width of the title before the end shrinks. | ## Accessibility diff --git a/packages/components/src/components/TopBar/TopBar.module.css b/packages/components/src/components/TopBar/TopBar.module.css index b77fbf3c..d35cb068 100644 --- a/packages/components/src/components/TopBar/TopBar.module.css +++ b/packages/components/src/components/TopBar/TopBar.module.css @@ -1,43 +1,43 @@ .base { - --top-bar-background: var(--kbq-background-bg); - --top-bar-padding-block: var(--kbq-size-m); - --top-bar-padding-inline: var(--kbq-size-xxl); - --top-bar-border-radius: 0; - --top-bar-min-block-size: var(--kbq-size-6xl); - --top-bar-gap: 80px; - --top-bar-z-index: var(--kbq-layer-topbar); - --top-bar-shadow: var(--kbq-shadow-overflow-normal-bottom); - --top-bar-container-start-gap: 0; - --top-bar-container-start-min-inline-size: 0; - --top-bar-container-end-gap: var(--kbq-size-s); - --top-bar-title-min-inline-size: 4ch; + --topbar-background: var(--kbq-background-bg); + --topbar-padding-block: var(--kbq-size-m); + --topbar-padding-inline: var(--kbq-size-xxl); + --topbar-border-radius: 0; + --topbar-min-block-size: var(--kbq-size-6xl); + --topbar-gap: 80px; + --topbar-z-index: var(--kbq-layer-topbar); + --topbar-shadow: var(--kbq-shadow-overflow-normal-bottom); + --topbar-container-start-gap: 0; + --topbar-container-start-min-inline-size: 0; + --topbar-container-end-gap: var(--kbq-size-s); + --topbar-title-min-inline-size: 4ch; display: flex; box-sizing: border-box; align-items: center; min-block-size: var( - --kbq-top-bar-min-block-size, - var(--top-bar-min-block-size) + --kbq-topbar-min-block-size, + var(--topbar-min-block-size) ); - gap: var(--kbq-top-bar-gap, var(--top-bar-gap)); - padding-block: var(--kbq-top-bar-padding-block, var(--top-bar-padding-block)); + gap: var(--kbq-topbar-gap, var(--topbar-gap)); + padding-block: var(--kbq-topbar-padding-block, var(--topbar-padding-block)); padding-inline: var( - --kbq-top-bar-padding-inline, - var(--top-bar-padding-inline) + --kbq-topbar-padding-inline, + var(--topbar-padding-inline) ); - border-radius: var(--kbq-top-bar-border-radius, var(--top-bar-border-radius)); - background: var(--kbq-top-bar-background, var(--top-bar-background)); + border-radius: var(--kbq-topbar-border-radius, var(--topbar-border-radius)); + background: var(--kbq-topbar-background, var(--topbar-background)); transition: box-shadow var(--kbq-transition-slow); } /* position */ .base[data-position='sticky'] { position: sticky; - z-index: var(--kbq-top-bar-z-index, var(--top-bar-z-index)); + z-index: var(--kbq-topbar-z-index, var(--topbar-z-index)); inset-block-start: 0; } /* shadow */ .base[data-shadow='true'] { - box-shadow: var(--kbq-top-bar-shadow, var(--top-bar-shadow)); + box-shadow: var(--kbq-topbar-shadow, var(--topbar-shadow)); } diff --git a/packages/components/src/components/TopBar/TopBar.stories.tsx b/packages/components/src/components/TopBar/TopBar.stories.tsx index b6d9c426..6f21e8e5 100644 --- a/packages/components/src/components/TopBar/TopBar.stories.tsx +++ b/packages/components/src/components/TopBar/TopBar.stories.tsx @@ -336,8 +336,8 @@ export const CollapsingActions: Story = { ref={parentRef} style={ { - '--kbq-top-bar-container-start-min-inline-size': `${START_RESERVE}px`, - '--kbq-top-bar-container-end-gap': 0, + '--kbq-topbar-container-start-min-inline-size': `${START_RESERVE}px`, + '--kbq-topbar-container-end-gap': 0, } as CSSProperties } > diff --git a/packages/components/src/components/TopBar/components/TopBarContainer/TopBarContainer.module.css b/packages/components/src/components/TopBar/components/TopBarContainer/TopBarContainer.module.css index 9fe22e23..6b5dec78 100644 --- a/packages/components/src/components/TopBar/components/TopBarContainer/TopBarContainer.module.css +++ b/packages/components/src/components/TopBar/components/TopBarContainer/TopBarContainer.module.css @@ -6,13 +6,10 @@ .base[data-placement='start'] { flex: 1 1 auto; - gap: var( - --kbq-top-bar-container-start-gap, - var(--top-bar-container-start-gap) - ); + gap: var(--kbq-topbar-container-start-gap, var(--topbar-container-start-gap)); min-inline-size: var( - --kbq-top-bar-container-start-min-inline-size, - var(--top-bar-container-start-min-inline-size) + --kbq-topbar-container-start-min-inline-size, + var(--topbar-container-start-min-inline-size) ); overflow: clip; overflow-clip-margin: var(--kbq-size-xxs); @@ -21,7 +18,7 @@ .base[data-placement='end'] { flex: 0 0 auto; justify-content: flex-end; - gap: var(--kbq-top-bar-container-end-gap, var(--top-bar-container-end-gap)); + gap: var(--kbq-topbar-container-end-gap, var(--topbar-container-end-gap)); } .base[data-placement='end']:first-child { diff --git a/packages/components/src/components/TopBar/components/TopBarTitle/TopBarTitle.module.css b/packages/components/src/components/TopBar/components/TopBarTitle/TopBarTitle.module.css index 4e7e8939..2c587cfa 100644 --- a/packages/components/src/components/TopBar/components/TopBarTitle/TopBarTitle.module.css +++ b/packages/components/src/components/TopBar/components/TopBarTitle/TopBarTitle.module.css @@ -4,8 +4,8 @@ @mixin ellipsis; min-inline-size: var( - --kbq-top-bar-title-min-inline-size, - var(--top-bar-title-min-inline-size) + --kbq-topbar-title-min-inline-size, + var(--topbar-title-min-inline-size) ); color: var(--kbq-foreground-contrast); } From adda1c6f3c2344aceefe14550ff57d2277ef8de9 Mon Sep 17 00:00:00 2001 From: Kamil Emeleev Date: Mon, 10 Aug 2026 12:54:39 +0300 Subject: [PATCH 2/3] style(Flag): drop redundant comment above the private CSS variables --- packages/components/src/components/Flag/Flag.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/components/Flag/Flag.module.css b/packages/components/src/components/Flag/Flag.module.css index e7c1266f..dbfd2c9d 100644 --- a/packages/components/src/components/Flag/Flag.module.css +++ b/packages/components/src/components/Flag/Flag.module.css @@ -1,5 +1,4 @@ .base { - /* Defaults for the public `--kbq-flag-*` knobs (see the component docs). */ --flag-size: 1em; --flag-aspect-ratio: 3 / 2; --flag-border-radius: 0; From fac421c274184bbbcfcbadd05754d8809376a980 Mon Sep 17 00:00:00 2001 From: Kamil Emeleev Date: Mon, 10 Aug 2026 12:57:44 +0300 Subject: [PATCH 3/3] fix(TopBar): restore the original CSS variable names (DS-5396) --- AGENTS.md | 6 +-- .../src/components/TopBar/TopBar.mdx | 30 ++++++------- .../src/components/TopBar/TopBar.module.css | 44 +++++++++---------- .../src/components/TopBar/TopBar.stories.tsx | 4 +- .../TopBarContainer.module.css | 11 +++-- .../TopBarTitle/TopBarTitle.module.css | 4 +- 6 files changed, 51 insertions(+), 48 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index c179d169..36387bc2 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -141,11 +141,11 @@ Private `---*` variables define defaults. Public `--kbq--*` variables are override points. ```css -/* TopBar.module.css */ +/* Flag.module.css */ .base { - --topbar-gap: 80px; + --flag-border-radius: 0; - gap: var(--kbq-topbar-gap, var(--topbar-gap)); + border-radius: var(--kbq-flag-border-radius, var(--flag-border-radius)); } ``` diff --git a/packages/components/src/components/TopBar/TopBar.mdx b/packages/components/src/components/TopBar/TopBar.mdx index 74465b8f..4ce21242 100644 --- a/packages/components/src/components/TopBar/TopBar.mdx +++ b/packages/components/src/components/TopBar/TopBar.mdx @@ -44,7 +44,7 @@ The bar holds one container per side. Render only the ones you need. `placement="end"` sticks to the opposite edge. - `TopBar.Title` — the page heading. It renders an `h1` and cuts long text with an ellipsis. -By default, TopBar keeps at least `80px` between the two sides. Use `--kbq-topbar-gap` to override +By default, TopBar keeps at least `80px` between the two sides. Use `--kbq-top-bar-gap` to override it. ## Props @@ -96,20 +96,20 @@ the container gap and TopBar inline padding, so Breadcrumbs collapse before the These optional variables override the component's internal values. -| Variable | Purpose | -| ---------------------------------------------- | --------------------------------------------------- | -| `--kbq-topbar-background` | Background of the bar. | -| `--kbq-topbar-padding-block` | Block padding. | -| `--kbq-topbar-padding-inline` | Inline padding. | -| `--kbq-topbar-border-radius` | Border radius. | -| `--kbq-topbar-min-block-size` | Minimum block size of the bar. | -| `--kbq-topbar-gap` | Minimum distance between the two sides. | -| `--kbq-topbar-z-index` | Stack order while `sticky`. | -| `--kbq-topbar-shadow` | Shadow shown by `hasShadow`. | -| `--kbq-topbar-container-start-gap` | Gap between items in the start container. | -| `--kbq-topbar-container-start-min-inline-size` | Width the start container keeps for itself. | -| `--kbq-topbar-container-end-gap` | Gap between items in the end container. | -| `--kbq-topbar-title-min-inline-size` | Smallest width of the title before the end shrinks. | +| Variable | Purpose | +| ----------------------------------------------- | --------------------------------------------------- | +| `--kbq-top-bar-background` | Background of the bar. | +| `--kbq-top-bar-padding-block` | Block padding. | +| `--kbq-top-bar-padding-inline` | Inline padding. | +| `--kbq-top-bar-border-radius` | Border radius. | +| `--kbq-top-bar-min-block-size` | Minimum block size of the bar. | +| `--kbq-top-bar-gap` | Minimum distance between the two sides. | +| `--kbq-top-bar-z-index` | Stack order while `sticky`. | +| `--kbq-top-bar-shadow` | Shadow shown by `hasShadow`. | +| `--kbq-top-bar-container-start-gap` | Gap between items in the start container. | +| `--kbq-top-bar-container-start-min-inline-size` | Width the start container keeps for itself. | +| `--kbq-top-bar-container-end-gap` | Gap between items in the end container. | +| `--kbq-top-bar-title-min-inline-size` | Smallest width of the title before the end shrinks. | ## Accessibility diff --git a/packages/components/src/components/TopBar/TopBar.module.css b/packages/components/src/components/TopBar/TopBar.module.css index d35cb068..b77fbf3c 100644 --- a/packages/components/src/components/TopBar/TopBar.module.css +++ b/packages/components/src/components/TopBar/TopBar.module.css @@ -1,43 +1,43 @@ .base { - --topbar-background: var(--kbq-background-bg); - --topbar-padding-block: var(--kbq-size-m); - --topbar-padding-inline: var(--kbq-size-xxl); - --topbar-border-radius: 0; - --topbar-min-block-size: var(--kbq-size-6xl); - --topbar-gap: 80px; - --topbar-z-index: var(--kbq-layer-topbar); - --topbar-shadow: var(--kbq-shadow-overflow-normal-bottom); - --topbar-container-start-gap: 0; - --topbar-container-start-min-inline-size: 0; - --topbar-container-end-gap: var(--kbq-size-s); - --topbar-title-min-inline-size: 4ch; + --top-bar-background: var(--kbq-background-bg); + --top-bar-padding-block: var(--kbq-size-m); + --top-bar-padding-inline: var(--kbq-size-xxl); + --top-bar-border-radius: 0; + --top-bar-min-block-size: var(--kbq-size-6xl); + --top-bar-gap: 80px; + --top-bar-z-index: var(--kbq-layer-topbar); + --top-bar-shadow: var(--kbq-shadow-overflow-normal-bottom); + --top-bar-container-start-gap: 0; + --top-bar-container-start-min-inline-size: 0; + --top-bar-container-end-gap: var(--kbq-size-s); + --top-bar-title-min-inline-size: 4ch; display: flex; box-sizing: border-box; align-items: center; min-block-size: var( - --kbq-topbar-min-block-size, - var(--topbar-min-block-size) + --kbq-top-bar-min-block-size, + var(--top-bar-min-block-size) ); - gap: var(--kbq-topbar-gap, var(--topbar-gap)); - padding-block: var(--kbq-topbar-padding-block, var(--topbar-padding-block)); + gap: var(--kbq-top-bar-gap, var(--top-bar-gap)); + padding-block: var(--kbq-top-bar-padding-block, var(--top-bar-padding-block)); padding-inline: var( - --kbq-topbar-padding-inline, - var(--topbar-padding-inline) + --kbq-top-bar-padding-inline, + var(--top-bar-padding-inline) ); - border-radius: var(--kbq-topbar-border-radius, var(--topbar-border-radius)); - background: var(--kbq-topbar-background, var(--topbar-background)); + border-radius: var(--kbq-top-bar-border-radius, var(--top-bar-border-radius)); + background: var(--kbq-top-bar-background, var(--top-bar-background)); transition: box-shadow var(--kbq-transition-slow); } /* position */ .base[data-position='sticky'] { position: sticky; - z-index: var(--kbq-topbar-z-index, var(--topbar-z-index)); + z-index: var(--kbq-top-bar-z-index, var(--top-bar-z-index)); inset-block-start: 0; } /* shadow */ .base[data-shadow='true'] { - box-shadow: var(--kbq-topbar-shadow, var(--topbar-shadow)); + box-shadow: var(--kbq-top-bar-shadow, var(--top-bar-shadow)); } diff --git a/packages/components/src/components/TopBar/TopBar.stories.tsx b/packages/components/src/components/TopBar/TopBar.stories.tsx index 6f21e8e5..b6d9c426 100644 --- a/packages/components/src/components/TopBar/TopBar.stories.tsx +++ b/packages/components/src/components/TopBar/TopBar.stories.tsx @@ -336,8 +336,8 @@ export const CollapsingActions: Story = { ref={parentRef} style={ { - '--kbq-topbar-container-start-min-inline-size': `${START_RESERVE}px`, - '--kbq-topbar-container-end-gap': 0, + '--kbq-top-bar-container-start-min-inline-size': `${START_RESERVE}px`, + '--kbq-top-bar-container-end-gap': 0, } as CSSProperties } > diff --git a/packages/components/src/components/TopBar/components/TopBarContainer/TopBarContainer.module.css b/packages/components/src/components/TopBar/components/TopBarContainer/TopBarContainer.module.css index 6b5dec78..9fe22e23 100644 --- a/packages/components/src/components/TopBar/components/TopBarContainer/TopBarContainer.module.css +++ b/packages/components/src/components/TopBar/components/TopBarContainer/TopBarContainer.module.css @@ -6,10 +6,13 @@ .base[data-placement='start'] { flex: 1 1 auto; - gap: var(--kbq-topbar-container-start-gap, var(--topbar-container-start-gap)); + gap: var( + --kbq-top-bar-container-start-gap, + var(--top-bar-container-start-gap) + ); min-inline-size: var( - --kbq-topbar-container-start-min-inline-size, - var(--topbar-container-start-min-inline-size) + --kbq-top-bar-container-start-min-inline-size, + var(--top-bar-container-start-min-inline-size) ); overflow: clip; overflow-clip-margin: var(--kbq-size-xxs); @@ -18,7 +21,7 @@ .base[data-placement='end'] { flex: 0 0 auto; justify-content: flex-end; - gap: var(--kbq-topbar-container-end-gap, var(--topbar-container-end-gap)); + gap: var(--kbq-top-bar-container-end-gap, var(--top-bar-container-end-gap)); } .base[data-placement='end']:first-child { diff --git a/packages/components/src/components/TopBar/components/TopBarTitle/TopBarTitle.module.css b/packages/components/src/components/TopBar/components/TopBarTitle/TopBarTitle.module.css index 2c587cfa..4e7e8939 100644 --- a/packages/components/src/components/TopBar/components/TopBarTitle/TopBarTitle.module.css +++ b/packages/components/src/components/TopBar/components/TopBarTitle/TopBarTitle.module.css @@ -4,8 +4,8 @@ @mixin ellipsis; min-inline-size: var( - --kbq-topbar-title-min-inline-size, - var(--topbar-title-min-inline-size) + --kbq-top-bar-title-min-inline-size, + var(--top-bar-title-min-inline-size) ); color: var(--kbq-foreground-contrast); }