fix(ui): standardize form control heights and improve button/input co… - #340
Merged
Conversation
…mponent consistency - Change button alignment from items-baseline to items-center - Add explicit height classes (h-form-control-sm/md) to buttons, inputs, and form controls - Add iconSize prop to Button component for granular icon sizing control - Improve NumericInput trigger styling with flex-based layout and responsive icon sizes - Add font-normal to inputs, textareas, and form controls for consistent typography - Enhance form control hover
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
WalkthroughCentralises form-control tokens across the design system, updates many atoms/molecules to use form-control styling, exposes an Changes
Sequence Diagram(s)sequenceDiagram
participant NumericInputContext as NumericInputContext
participant Trigger as Increment/DecrementTrigger
participant Button as Button
participant Icon as Icon
Note over NumericInputContext,Trigger: Trigger rendering flow (icon sizing)
NumericInputContext->>Trigger: provide size (sm/md/lg) via context
Trigger->>Trigger: compute resolvedIconSize (explicit iconSize OR derive from context size)
Trigger->>Button: render Button with size="current" and iconSize=resolvedIconSize
Button->>Icon: render left/right Icon with size={iconSize}
Icon-->>Button: rendered Icon
Button-->>Trigger: Button rendered
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
libs/ui/src/atoms/numeric-input.tsx (1)
278-298: 🧹 Nitpick | 🔵 TrivialConsider using
typeinstead ofinterfacefor props definitions.As per coding guidelines,
typeshould be preferred overinterfacefor type definitions in this project.♻️ Suggested refactor
-interface NumericInputIncrementTriggerProps - extends Omit<ComponentPropsWithoutRef<"button">, "children"> { +type NumericInputIncrementTriggerProps = Omit<ComponentPropsWithoutRef<"button">, "children"> & { // === Button styling === variant?: "primary" | "secondary" | "tertiary" | "danger" | "warning" // ... rest of props -} +}Apply the same pattern to
NumericInputDecrementTriggerProps.Also applies to: 345-365
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@libs/ui/src/atoms/numeric-input.tsx` around lines 278 - 298, Replace the interface declarations for NumericInputIncrementTriggerProps (and the similar NumericInputDecrementTriggerProps) with type aliases: convert the current "interface NumericInputIncrementTriggerProps extends Omit<ComponentPropsWithoutRef<'button'>, 'children'> { ... }" into a "type NumericInputIncrementTriggerProps = Omit<ComponentPropsWithoutRef<'button'>, 'children'> & { ... }" (and do the same for NumericInputDecrementTriggerProps), preserving all property names, optional modifiers, and union literal types (variant, theme, iconPosition, iconSize, etc.) as-is so the external API remains unchanged.libs/ui/src/molecules/select.tsx (1)
109-133:⚠️ Potential issue | 🟡 MinorAdd explicit height and radius to the
xsvariant to maintain consistency with other sizes.The
xsvariant lacks both an explicit height token and the radius variable declaration thatsmandmddefine. Sinceh-form-control-xsandradius-form-control-xstokens do not exist in the design system (onlysmandmdare defined), thexsvariant should inherit thesmsizing to maintain visual consistency across form controls.🔧 Suggested fix
xs: { - trigger: "p-select-trigger-sm text-select-trigger-xs", + trigger: + "h-form-control-sm p-select-trigger-sm text-select-trigger-xs [--radius-form-control:var(--radius-form-control-sm)]", item: "text-select-item-xs", valueText: "text-select-value-xs", itemGroupLabel: "text-select-item-group-label-xs", },Note: The
lgvariant has the same inconsistency and should also be updated to define an explicit height and radius variable.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@libs/ui/src/molecules/select.tsx` around lines 109 - 133, The xs variant is missing an explicit height token and radius var: update the xs object's trigger string (currently "p-select-trigger-sm text-select-trigger-xs") to include the form-control height token and radius var from sm (e.g., add "h-form-control-sm" and "[--radius-form-control:var(--radius-form-control-sm)]"); likewise update the lg variant's trigger (currently "p-select-trigger-md text-select-trigger-lg") to include an explicit height and radius variable using the md tokens (e.g., "h-form-control-md" and "[--radius-form-control:var(--radius-form-control-md)]") so both xs and lg match the pattern used by sm and md.libs/ui/src/molecules/combobox.tsx (1)
86-108:⚠️ Potential issue | 🟠 MajorSize
lgvariant is missing explicit height and radius tokens.The
smandmdvariants define height tokens (h-form-control-sm,h-form-control-md) and radius variables, but thelgvariant only specifiestext-input-lgwithout either. This inconsistency is present across multiple form-control components (Input, NumericInput, Combobox).Note that the
h-form-control-lgtoken does not currently exist inlibs/ui/src/tokens/components/_form-control.css. To resolve this, either create the missing token definition (consistent withsmandmdpatterns) or clarify whether thelgvariant intentionally omits height and radius handling.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@libs/ui/src/molecules/combobox.tsx` around lines 86 - 108, The lg size variant in the Combobox variants block is missing the explicit height and radius tokens present in sm/md: add the same form-control tokens to the lg variant by including the height token and radius CSS variable (e.g. replace or augment the current control value "text-input-lg" with a string that includes "h-form-control-lg" and the radius var like "[--radius-form-control:var(--radius-form-control-lg)]"), or if you prefer to keep omission intentional, add a clear comment in the variants.size.lg control explaining why height/radius are omitted; ensure consistency with the Input/NumericInput variants and, if adding tokens, define h-form-control-lg in the form-control tokens file to match the sm/md pattern.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@libs/ui/src/atoms/numeric-input.tsx`:
- Around line 319-320: The icon size resolution logic used in IncrementTrigger
and DecrementTrigger is duplicated; extract that logic into a single helper
(e.g., getResolvedIconSize or computeResolvedIconSize) that accepts the props
used (iconSize and size) and returns the resolvedIconSize, then replace the
inline ternary expression in both IncrementTrigger and DecrementTrigger with a
call to that helper so both components share the same implementation.
In `@libs/ui/src/atoms/textarea.tsx`:
- Around line 53-54: Replace the arbitrary Tailwind bracket radius overrides in
the textarea size mapping with token utility classes: change the string
containing "[--radius-textarea:var(--radius-form-control-sm)]" to use
"rounded-textarea-sm" and change
"[--radius-textarea:var(--radius-form-control-md)]" to "rounded-textarea-md"
(these occur in the size entries that currently read p-textarea-sm
text-textarea-sm ... and p-textarea-md text-textarea-md ...); ensure the
component’s size mapping (the object keys for sm and md) uses the new token
class names and confirm corresponding CSS token utility classes
(rounded-textarea-sm / rounded-textarea-md) exist in the token stylesheet.
In `@libs/ui/src/molecules/search-form.tsx`:
- Around line 21-24: The class list in SearchForm uses the input-specific token
"hover:border-input-border-hover", which ties the SearchForm component to Input
tokens; replace that token with a SearchForm-specific hover token (e.g.,
"hover:border-search-form-border-hover") wherever the class array for SearchForm
(the array containing "relative flex items-center overflow-hidden",
"form-control-base", "hover:border-input-border-hover",
"focus-within:border-input-border-focus") is defined so the component uses its
own token boundary and follows the libs/ui token guideline.
- Around line 49-54: Replace the arbitrary Tailwind custom-property usage in the
size-specific control tokens with new named rounded utility classes: add token
definitions for rounded-form-control-sm and rounded-form-control-md in the
design token / Tailwind utilities and then replace occurrences of
"h-form-control-sm" and "h-form-control-md" control values that currently use
"[--radius-form-control:var(--radius-form-control-sm)]" and
"[--radius-form-control:var(--radius-form-control-md)]" (found in
search-form.tsx control, and analogous files input.tsx, textarea.tsx,
numeric-input.tsx, select.tsx, combobox.tsx) to instead include the respective
"rounded-form-control-sm" and "rounded-form-control-md" utility classes; ensure
the token names map to the same radius values so behavior is preserved and
remove the bracketed arbitrary-value syntax.
In `@libs/ui/src/tokens/components/_form-control.css`:
- Around line 42-55: Lines computing --height-form-control-sm and
--height-form-control-md violate the scss/operator-no-newline-after rule because
operators are followed by newlines inside calc(); rewrite each calc() so
operators sit at the end of the preceding line (or collapse into a single line)
— e.g. combine var(--border-width-form-control) * 2 + var(--spacing-50) * 2 +
1lh and similarly for var(--spacing-100) — ensuring the expressions for
--height-form-control-sm and --height-form-control-md place '*' and '+' at line
ends to satisfy the lint rule.
In `@libs/ui/src/tokens/components/atoms/_textarea.css`:
- Line 85: Rename the CSS custom property --border-textarea-width to
--border-width-textarea to conform to the --border-width-<component> convention
and update all usages that reference the old token (e.g.,
var(--border-textarea-width)) to use var(--border-width-textarea) instead;
ensure you update both the token declaration and every consumer in the same
component (look for usages in _textarea.css and any related consumer rules like
border or outline assignments) to avoid breaking styles.
---
Outside diff comments:
In `@libs/ui/src/atoms/numeric-input.tsx`:
- Around line 278-298: Replace the interface declarations for
NumericInputIncrementTriggerProps (and the similar
NumericInputDecrementTriggerProps) with type aliases: convert the current
"interface NumericInputIncrementTriggerProps extends
Omit<ComponentPropsWithoutRef<'button'>, 'children'> { ... }" into a "type
NumericInputIncrementTriggerProps = Omit<ComponentPropsWithoutRef<'button'>,
'children'> & { ... }" (and do the same for NumericInputDecrementTriggerProps),
preserving all property names, optional modifiers, and union literal types
(variant, theme, iconPosition, iconSize, etc.) as-is so the external API remains
unchanged.
In `@libs/ui/src/molecules/combobox.tsx`:
- Around line 86-108: The lg size variant in the Combobox variants block is
missing the explicit height and radius tokens present in sm/md: add the same
form-control tokens to the lg variant by including the height token and radius
CSS variable (e.g. replace or augment the current control value "text-input-lg"
with a string that includes "h-form-control-lg" and the radius var like
"[--radius-form-control:var(--radius-form-control-lg)]"), or if you prefer to
keep omission intentional, add a clear comment in the variants.size.lg control
explaining why height/radius are omitted; ensure consistency with the
Input/NumericInput variants and, if adding tokens, define h-form-control-lg in
the form-control tokens file to match the sm/md pattern.
In `@libs/ui/src/molecules/select.tsx`:
- Around line 109-133: The xs variant is missing an explicit height token and
radius var: update the xs object's trigger string (currently
"p-select-trigger-sm text-select-trigger-xs") to include the form-control height
token and radius var from sm (e.g., add "h-form-control-sm" and
"[--radius-form-control:var(--radius-form-control-sm)]"); likewise update the lg
variant's trigger (currently "p-select-trigger-md text-select-trigger-lg") to
include an explicit height and radius variable using the md tokens (e.g.,
"h-form-control-md" and "[--radius-form-control:var(--radius-form-control-md)]")
so both xs and lg match the pattern used by sm and md.
ℹ️ Review info
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (15)
libs/ui/src/atoms/button.tsxlibs/ui/src/atoms/input.tsxlibs/ui/src/atoms/numeric-input.tsxlibs/ui/src/atoms/textarea.tsxlibs/ui/src/molecules/combobox.tsxlibs/ui/src/molecules/search-form.tsxlibs/ui/src/molecules/select.tsxlibs/ui/src/tokens/components/_form-control.csslibs/ui/src/tokens/components/atoms/_numeric-input.csslibs/ui/src/tokens/components/atoms/_textarea.csslibs/ui/src/tokens/components/components.csslibs/ui/src/tokens/components/molecules/_combobox.csslibs/ui/src/tokens/components/molecules/_search-form.csslibs/ui/src/tokens/components/molecules/_select.csslibs/ui/stories/overview/component-comparison.stories.tsx
…ses in form controls
- Replace `[--radius-form-control:var(--radius-form-control-{size})]` with `rounded-form-control-{size}` in NumericInput, Combobox, SearchForm, and Select components
- Simplify styling by using Tailwind's direct class application instead of CSS variable indirection
- Maintain consistent border-radius behavior across all form control sizes (sm/md)
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
libs/ui/src/molecules/select.tsx (2)
108-133: 🧹 Nitpick | 🔵 TrivialConsider adding explicit height classes for
xsandlgsize variants.The
smandmdvariants include explicit height (h-form-control-sm,h-form-control-md) and border-radius (rounded-form-control-sm,rounded-form-control-md) classes, butxsandlgdo not. This inconsistency could lead to unexpected sizing behaviour if the baseform-control-basedoesn't provide suitable defaults for these sizes.If this is intentional (e.g.,
xsandlgare meant to be content-driven), please consider adding a brief comment to clarify the design decision.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@libs/ui/src/molecules/select.tsx` around lines 108 - 133, The xs and lg size variants in the select size map (keys "xs" and "lg" in the size configuration object in select.tsx) lack explicit height and border-radius classes while sm and md include h-form-control-* and rounded-form-control-*; update the "xs" and "lg" entries to include appropriate height (e.g., h-form-control-xs / h-form-control-lg) and border-radius (e.g., rounded-form-control-xs / rounded-form-control-lg) classes to match sm/md, or add a short comment on the xs/lg entries explaining that their sizing is intentionally content-driven.
320-343: 🧹 Nitpick | 🔵 TrivialChevron icon sizing may need adjustment for
xsandlgsizes.The current logic maps only
"sm"to"sm"icon size, defaulting everything else to"md":const chevronIconSize = effectiveSize === "sm" ? "sm" : "md"This means both
xsandlgsizes will use"md"icons. Forxs, a smaller icon might be more appropriate; forlg, a larger icon could better match the trigger's visual weight.💡 Suggested improvement for comprehensive size mapping
- const chevronIconSize = effectiveSize === "sm" ? "sm" : "md" + const chevronIconSize = effectiveSize === "xs" || effectiveSize === "sm" ? "sm" : "md"Or, if you anticipate needing
lgicons in future:const chevronIconSizeMap: Record<SelectSize, "sm" | "md" | "lg"> = { xs: "sm", sm: "sm", md: "md", lg: "lg", } const chevronIconSize = chevronIconSizeMap[effectiveSize]🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@libs/ui/src/molecules/select.tsx` around lines 320 - 343, The chevronIconSize logic currently collapses all sizes except "sm" to "md", causing xs and lg to render inappropriate icon sizes; update the mapping used to derive chevronIconSize (based on effectiveSize) to explicitly map xs→sm, sm→sm, md→md, lg→lg (or another desired mapping) so the Icon component (icon="token-icon-select-indicator") receives the correct size; change the single-line conditional for chevronIconSize to use a size map or switch inside the select component where effectiveSize is available.libs/ui/src/atoms/numeric-input.tsx (1)
278-299:⚠️ Potential issue | 🟡 Minorrefactor(ui): Convert prop definitions from
interfacetotypeBoth
NumericInputIncrementTriggerPropsandNumericInputDecrementTriggerPropsstill useinterface. Please switch them totypealiases to match repository standards.♻️ Suggested patch
-interface NumericInputIncrementTriggerProps - extends Omit<ComponentPropsWithoutRef<"button">, "children"> { +type NumericInputIncrementTriggerProps = Omit< + ComponentPropsWithoutRef<"button">, + "children" +> & { // === Button styling === variant?: "primary" | "secondary" | "tertiary" | "danger" | "warning" theme?: "solid" | "light" | "borderless" | "outlined" uppercase?: boolean block?: boolean @@ // === React === ref?: Ref<HTMLButtonElement> children?: ReactNode -} +} -interface NumericInputDecrementTriggerProps - extends Omit<ComponentPropsWithoutRef<"button">, "children"> { +type NumericInputDecrementTriggerProps = Omit< + ComponentPropsWithoutRef<"button">, + "children" +> & { // === Button styling === variant?: "primary" | "secondary" | "tertiary" | "danger" | "warning" theme?: "solid" | "light" | "borderless" | "outlined" uppercase?: boolean block?: boolean @@ // === React === ref?: Ref<HTMLButtonElement> children?: ReactNode -} +}Coding guideline
libs/ui/**/*.{ts,tsx}requires usingtypeinstead ofinterfacefor type definitions.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@libs/ui/src/atoms/numeric-input.tsx` around lines 278 - 299, Replace the two interface declarations with type aliases: convert NumericInputIncrementTriggerProps (and the corresponding NumericInputDecrementTriggerProps) from "interface" to "type" while preserving the exact property shape, extends clause (Omit<ComponentPropsWithoutRef<"button">, "children">), and all members (variant, theme, uppercase, block, icon, iconPosition, iconSize, isLoading, loadingText, ref, children) so the exported types remain identical but use the repository-standard type alias form.
♻️ Duplicate comments (1)
libs/ui/src/atoms/numeric-input.tsx (1)
318-320: 🧹 Nitpick | 🔵 Trivialrefactor(ui): Extract shared icon-size resolver
resolvedIconSizeis duplicated in both triggers. Please extract a shared helper to keep sizing logic in one place.♻️ Suggested patch
+function resolveNumericInputTriggerIconSize( + iconSize: NumericInputIncrementTriggerProps["iconSize"] | NumericInputDecrementTriggerProps["iconSize"], + size: NumericInputProps["size"] +) { + return iconSize ?? (size === "sm" ? "xs" : size === "lg" ? "md" : "sm") +} + NumericInput.IncrementTrigger = function NumericInputIncrementTrigger({ @@ - const resolvedIconSize = - iconSize ?? (size === "sm" ? "xs" : size === "lg" ? "md" : "sm") + const resolvedIconSize = resolveNumericInputTriggerIconSize(iconSize, size) @@ NumericInput.DecrementTrigger = function NumericInputDecrementTrigger({ @@ - const resolvedIconSize = - iconSize ?? (size === "sm" ? "xs" : size === "lg" ? "md" : "sm") + const resolvedIconSize = resolveNumericInputTriggerIconSize(iconSize, size)Also applies to: 385-387
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@libs/ui/src/atoms/numeric-input.tsx` around lines 318 - 320, The duplicated resolvedIconSize calculation should be extracted into a single helper (e.g., resolveIconSize or getResolvedIconSize) that accepts iconSize and size from useNumericInputContext and returns the computed value; replace the two inline copies in the trigger components with calls to this helper so sizing logic lives in one place and both uses (the one around resolvedIconSize and the other at lines ~385-387) share the same implementation.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@libs/ui/src/atoms/numeric-input.tsx`:
- Around line 52-53: Replace the incorrect CSS Grid utility in the numeric
input's class list: in the component that renders the trigger (look for the
class string containing "flex flex-1 place-items-center" in numeric-input.tsx),
change "place-items-center" to "items-center" (and add "justify-center" as well
if you need horizontal centering) so the flex container aligns children
correctly.
In `@libs/ui/src/molecules/combobox.tsx`:
- Around line 184-185: The chevron icon size mapping in combobox.tsx uses const
resolvedChevronIconSize = size === "sm" ? "sm" : "md", which causes both
non-"sm" sizes (e.g., "xs" and "lg") to render as "md"; update the
resolvedChevronIconSize logic to mirror the Select component fix so each input
size maps to an appropriate icon size (e.g., map "xs"→"xs", "sm"→"sm",
"md"→"md", "lg"→"lg" or otherwise clamp consistently) — change the resolution
around the size prop in combobox.tsx (resolvedChevronIconSize, size) to follow
the same mapping rule you implemented in select.tsx for consistent visuals.
In `@libs/ui/src/molecules/select.tsx`:
- Around line 337-343: Replace the inline template literal on the Icon
component's className with a conditional class-merging utility (e.g., clsx) or a
tv() variant to improve readability; specifically update the Icon usage (props:
className, icon="token-icon-select-indicator", size={chevronIconSize}) to
compute the base classes "text-select-trigger
group-hover:text-select-trigger-hover motion-safe:transition-[transform,color]
motion-safe:duration-200 motion-reduce:transition-none" and conditionally add
"rotate-180" when api.open is true or "rotate-0" otherwise via clsx or tv() so
the behavior remains identical but styling is more consistent and maintainable.
---
Outside diff comments:
In `@libs/ui/src/atoms/numeric-input.tsx`:
- Around line 278-299: Replace the two interface declarations with type aliases:
convert NumericInputIncrementTriggerProps (and the corresponding
NumericInputDecrementTriggerProps) from "interface" to "type" while preserving
the exact property shape, extends clause
(Omit<ComponentPropsWithoutRef<"button">, "children">), and all members
(variant, theme, uppercase, block, icon, iconPosition, iconSize, isLoading,
loadingText, ref, children) so the exported types remain identical but use the
repository-standard type alias form.
In `@libs/ui/src/molecules/select.tsx`:
- Around line 108-133: The xs and lg size variants in the select size map (keys
"xs" and "lg" in the size configuration object in select.tsx) lack explicit
height and border-radius classes while sm and md include h-form-control-* and
rounded-form-control-*; update the "xs" and "lg" entries to include appropriate
height (e.g., h-form-control-xs / h-form-control-lg) and border-radius (e.g.,
rounded-form-control-xs / rounded-form-control-lg) classes to match sm/md, or
add a short comment on the xs/lg entries explaining that their sizing is
intentionally content-driven.
- Around line 320-343: The chevronIconSize logic currently collapses all sizes
except "sm" to "md", causing xs and lg to render inappropriate icon sizes;
update the mapping used to derive chevronIconSize (based on effectiveSize) to
explicitly map xs→sm, sm→sm, md→md, lg→lg (or another desired mapping) so the
Icon component (icon="token-icon-select-indicator") receives the correct size;
change the single-line conditional for chevronIconSize to use a size map or
switch inside the select component where effectiveSize is available.
---
Duplicate comments:
In `@libs/ui/src/atoms/numeric-input.tsx`:
- Around line 318-320: The duplicated resolvedIconSize calculation should be
extracted into a single helper (e.g., resolveIconSize or getResolvedIconSize)
that accepts iconSize and size from useNumericInputContext and returns the
computed value; replace the two inline copies in the trigger components with
calls to this helper so sizing logic lives in one place and both uses (the one
around resolvedIconSize and the other at lines ~385-387) share the same
implementation.
ℹ️ Review info
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
libs/ui/src/atoms/numeric-input.tsxlibs/ui/src/molecules/combobox.tsxlibs/ui/src/molecules/search-form.tsxlibs/ui/src/molecules/select.tsx
KaiUweCZE
previously approved these changes
Mar 5, 2026
Contributor
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
libs/ui/scripts/validate-token-usage.js (1)
444-449:⚠️ Potential issue | 🟠 MajorAdd
--reference-widthand--z-indexto the external allow list.These CSS variables are used in
menu.tsx(line 63),select.tsx(line 31),toast.tsx(line 23), andcombobox.tsx(line 49) as runtime-provided values from the positioning library. They are not design tokens and are not defined in CSS files. Without adding them toexternalAllow, the validation script will incorrectly flag these variables as errors.Proposed fix
const externalAllow = new Set([ // Keep truly external/runtime-provided vars here. "--available-height", "--height", "--border-width-badge-dynamic", + "--reference-width", + "--z-index", ])🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@libs/ui/scripts/validate-token-usage.js` around lines 444 - 449, The externalAllow set in validate-token-usage.js is missing runtime-provided CSS variables used by the positioning lib; add the two variables "--reference-width" and "--z-index" to the externalAllow Set so validate-token-usage's check won't flag them as missing design tokens; update the Set definition that declares externalAllow to include these exact string entries (look for the externalAllow declaration in validate-token-usage.js).
♻️ Duplicate comments (2)
libs/ui/src/tokens/components/atoms/_textarea.css (1)
84-84: 🛠️ Refactor suggestion | 🟠 Majorfix(tokens): rename border width token to the required pattern
Line 84 still uses
--border-textarea-width, which does not follow the repository border-width naming convention. Please rename it to--border-width-textareaand update consumers (for example,libs/ui/src/atoms/textarea.tsxcurrently referencesborder-(length:--border-textarea-width)).♻️ Proposed fix
--- a/libs/ui/src/tokens/components/atoms/_textarea.css +++ b/libs/ui/src/tokens/components/atoms/_textarea.css @@ - --border-textarea-width: var(--border-width-form-control); + --border-width-textarea: var(--border-width-form-control);--- a/libs/ui/src/atoms/textarea.tsx +++ b/libs/ui/src/atoms/textarea.tsx @@ - "border-(length:--border-textarea-width) border-textarea-border", + "border-(length:--border-width-textarea) border-textarea-border",As per coding guidelines
libs/ui/src/tokens/**/*.css: “Border widths use --border-width- naming pattern”.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@libs/ui/src/tokens/components/atoms/_textarea.css` at line 84, Rename the CSS custom property --border-textarea-width to --border-width-textarea in libs/ui/src/tokens/components/atoms/_textarea.css, then update all consumers to use the new token name (for example change usages like border-(length:--border-textarea-width) in libs/ui/src/atoms/textarea.tsx to border-(length:--border-width-textarea)); ensure any exports or token maps that reference --border-textarea-width are updated to the new --border-width-textarea so the naming follows the --border-width-<component> convention and no references remain to the old token.libs/ui/src/molecules/search-form.tsx (1)
23-24:⚠️ Potential issue | 🟠 Majorfix(search-form): replace Input-specific state token classes with SearchForm/form-control token classes
Line 23/Line 24 and Line 41 still bind
SearchFormstyling toInputtoken classes (*-input-*). That keeps the molecule coupled to atom token internals and weakens token boundaries.Proposed patch
control: [ "relative flex items-center overflow-hidden", "form-control-base", - "hover:border-input-border-hover", - "focus-within:border-input-border-focus", + "hover:border-search-form-border-hover", + "focus-within:border-search-form-border-focus", "focus-within:outline-(style:--default-ring-style) focus-within:outline-(length:--default-ring-width)", "focus-within:outline-input-ring", "focus-within:outline-offset-(length:--default-ring-offset)", "transition-colors duration-200 motion-reduce:transition-none", ], @@ clearButton: [ "h-full shrink-0 rounded-none p-search-form-clear-button", - "peer-hover:bg-input-hover peer-focus:bg-input-focus", + "peer-hover:bg-search-form-hover peer-focus:bg-search-form-focus", ],As per coding guidelines
libs/ui/src/**/*.{tsx,ts}: “Do not use direct semantic tokens in component implementations (e.g., bg-primary, text-fg); use component-specific token classes instead”.Also applies to: 41-41
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@libs/ui/src/molecules/search-form.tsx` around lines 23 - 24, The SearchForm component is using Input-specific token classes ("hover:border-input-border-hover", "focus-within:border-input-border-focus" and the same at the other occurrence) which couples the molecule to atom internals; update the class tokens in the SearchForm (and its FormControl usage) to use the SearchForm/form-control semantic token classes instead (e.g., replace any "*-input-*" tokens with the corresponding "search-form-*" or "form-control-*" tokens used by your design system) so the molecule relies only on its own token layer; locate these strings in the SearchForm component and swap them for the component-specific token names wherever they appear.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@libs/ui/scripts/validate-token-definitions.js`:
- Around line 381-389: The loop over content.matchAll currently extracts
variantKey but always marks both `--container-${variantKey}` and
`--breakpoint-${variantKey}` as used; change the regex capture to retain the
variant prefix (max|min) and only mark the corresponding token namespace: when
the matched prefix is "max" mark `--breakpoint-${variantKey}`, when it's "min"
mark `--container-${variantKey}` (use the same match groups from
content.matchAll and update the logic around `variantKey`, `candidates`,
`knownTokens`, and `classUsageTokens` so you no longer add both candidates
unconditionally).
- Around line 431-434: The validateTokenDefinitions function currently defaults
failOnUnused = false so unused-token checks become warnings; update either the
function signature (validateTokenDefinitions) to default failOnUnused = true or,
alternatively, add the --fail-on-unused flag to the npm scripts that invoke the
validator (the scripts in libs/ui/package.json referenced around the script
entries) and/or set VALIDATE_TOKEN_DEFINITIONS_FAIL_ON_UNUSED=1 in the CI job(s)
that run token validation so CI enforces failure on unused tokens; adjust
documentation if you intentionally want warning-only behavior.
In `@libs/ui/src/molecules/color-select.tsx`:
- Line 69: Change the CSS token name from --size-color-select-icon to
--spacing-color-select-icon in the color-select token stylesheet (replace the
declaration --size-color-select-icon: 50% with --spacing-color-select-icon: 50%)
and update any places that read that token so the size-color-select-icon class
uses the new --spacing-... variable; ensure the class name
size-color-select-icon remains the same but its referenced token is renamed to
match Tailwind v4's --spacing- namespace.
In `@libs/ui/src/templates/product-card.tsx`:
- Line 89: Change the props declaration from an interface to a type by replacing
interface ProductCardTemplateProps with type ProductCardTemplateProps; replace
the raw <span className="line-through">{originalPrice}</span> (symbol:
originalPrice) with a styled element that uses the component token classes via
tv(), e.g. render through ProductCard.Price or add the token class
text-product-card-original-price-fg so the struck price uses the
component-specific colour; likewise update the reviewCount rendering (symbol:
reviewCount) to include a component-specific token class for its colour (e.g.
text-product-card-review-count-fg) instead of a bare span so styling follows the
ProductCard token scheme and tv() usage.
In `@libs/ui/src/tokens/components/molecules/_combobox.css`:
- Line 13: Rename the derived combobox tokens to include explicit
-fg/-bg/-border suffixes: change --color-combobox-placeholder to
--color-combobox-placeholder-fg and change the derived trigger token at the
other spot (e.g. --color-combobox-trigger-hover) to
--color-combobox-trigger-fg-hover (or use -bg/-border as appropriate for that
token), and update all usages/references to those tokens (e.g., in styles or
other tokens) to the new names so semantics follow the derived-layer
-fg/-bg/-border convention.
In `@libs/ui/src/tokens/components/molecules/_select.css`:
- Around line 20-21: Rename the derived CSS token names to use explicit
-fg/-fg-hover suffixes: change declarations of --color-select-trigger and
--color-select-trigger-hover to --color-select-trigger-fg and
--color-select-trigger-fg-hover in the _select token definitions (and any
sibling token declarations), then update every usage/reference across the
codebase to the new names (search for --color-select-trigger and
--color-select-trigger-hover) to keep the derived-token naming convention
consistent with -fg/-bg/-border suffix rules.
---
Outside diff comments:
In `@libs/ui/scripts/validate-token-usage.js`:
- Around line 444-449: The externalAllow set in validate-token-usage.js is
missing runtime-provided CSS variables used by the positioning lib; add the two
variables "--reference-width" and "--z-index" to the externalAllow Set so
validate-token-usage's check won't flag them as missing design tokens; update
the Set definition that declares externalAllow to include these exact string
entries (look for the externalAllow declaration in validate-token-usage.js).
---
Duplicate comments:
In `@libs/ui/src/molecules/search-form.tsx`:
- Around line 23-24: The SearchForm component is using Input-specific token
classes ("hover:border-input-border-hover",
"focus-within:border-input-border-focus" and the same at the other occurrence)
which couples the molecule to atom internals; update the class tokens in the
SearchForm (and its FormControl usage) to use the SearchForm/form-control
semantic token classes instead (e.g., replace any "*-input-*" tokens with the
corresponding "search-form-*" or "form-control-*" tokens used by your design
system) so the molecule relies only on its own token layer; locate these strings
in the SearchForm component and swap them for the component-specific token names
wherever they appear.
In `@libs/ui/src/tokens/components/atoms/_textarea.css`:
- Line 84: Rename the CSS custom property --border-textarea-width to
--border-width-textarea in libs/ui/src/tokens/components/atoms/_textarea.css,
then update all consumers to use the new token name (for example change usages
like border-(length:--border-textarea-width) in libs/ui/src/atoms/textarea.tsx
to border-(length:--border-width-textarea)); ensure any exports or token maps
that reference --border-textarea-width are updated to the new
--border-width-textarea so the naming follows the --border-width-<component>
convention and no references remain to the old token.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: e54dd266-07da-48b8-a417-9ed5294acf19
📒 Files selected for processing (16)
libs/ui/scripts/validate-token-definitions.jslibs/ui/scripts/validate-token-usage.jslibs/ui/src/molecules/color-select.tsxlibs/ui/src/molecules/search-form.tsxlibs/ui/src/templates/product-card.tsxlibs/ui/src/tokens/components/atoms/_numeric-input.csslibs/ui/src/tokens/components/atoms/_textarea.csslibs/ui/src/tokens/components/molecules/_accordion.csslibs/ui/src/tokens/components/molecules/_color-select.csslibs/ui/src/tokens/components/molecules/_combobox.csslibs/ui/src/tokens/components/molecules/_dialog.csslibs/ui/src/tokens/components/molecules/_menu.csslibs/ui/src/tokens/components/molecules/_search-form.csslibs/ui/src/tokens/components/molecules/_select.csslibs/ui/src/tokens/components/molecules/_tree-view.csslibs/ui/src/tokens/components/organisms/_footer.css
💤 Files with no reviewable changes (4)
- libs/ui/src/tokens/components/molecules/_accordion.css
- libs/ui/src/tokens/components/molecules/_dialog.css
- libs/ui/src/tokens/components/molecules/_tree-view.css
- libs/ui/src/tokens/components/molecules/_menu.css
…ses in remaining form controls
- Replace `[--radius-{component}:var(--radius-form-control-{size})]` with `rounded-{component}-{size}` in Input and Textarea components
- Add size-specific rounded classes to NumericInput, Combobox, SearchForm, and Select components
- Add missing border and background color classes to form controls (NumericInput, Combobox, Select)
- Improve NumericInput trigger container styling with dedicated background
Contributor
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
libs/ui/src/molecules/select.tsx (1)
108-134:⚠️ Potential issue | 🟠 Majorfix(select): complete the public size mapping
SelectSizestill exposesxsandlg, but onlysmandmdget the new form-control height/radius classes, and the chevron size collapses every non-smvariant tomd. After this PR,xs/lgwill still render inconsistently with the standardised control sizing.Proposed fix
- const chevronIconSize = effectiveSize === "sm" ? "sm" : "md" + const chevronIconSize = + effectiveSize === "xs" || effectiveSize === "sm" ? "sm" : "md" variants: { size: { xs: { - trigger: "p-select-trigger-sm text-select-trigger-xs", + trigger: + "h-form-control-sm rounded-select-sm p-select-trigger-sm text-select-trigger-xs", item: "text-select-item-xs", valueText: "text-select-value-xs", itemGroupLabel: "text-select-item-group-label-xs", }, sm: { trigger: "h-form-control-sm rounded-select-sm p-select-trigger-sm text-select-trigger-sm", @@ }, lg: { - trigger: "p-select-trigger-md text-select-trigger-lg", + trigger: + "h-form-control-md rounded-select-md p-select-trigger-md text-select-trigger-lg", item: "text-select-item-lg", valueText: "text-select-value-lg", itemGroupLabel: "text-select-item-group-label-lg", },Also applies to: 321-321
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@libs/ui/src/molecules/select.tsx` around lines 108 - 134, The size mapping for the Select control is incomplete: xs and lg lack the standardized form-control height/radius and chevron sizing that sm and md have, causing inconsistent rendering; update the size object (keys xs and lg) to mirror the sm/md pattern by adding the appropriate form-control and rounded classes (e.g., h-form-control-xs / rounded-select-xs for xs and h-form-control-lg / rounded-select-lg for lg) and ensure the trigger class includes the correct p-select-trigger-<size> and text-select-trigger-<size> so chevron sizing no longer collapses to md (refer to the existing sm and md entries in the size mapping to copy the exact class composition).
♻️ Duplicate comments (4)
libs/ui/src/tokens/components/atoms/_textarea.css (1)
84-84: 🛠️ Refactor suggestion | 🟠 Majorrefactor(textarea-tokens): rename the border-width token to the repository pattern
This is still declared as
--border-textarea-width, so the textarea token file remains off the--border-width-<component>convention. Please rename it here and update the consumer inlibs/ui/src/atoms/textarea.tsxin the same change.As per coding guidelines
libs/ui/src/tokens/**/*.css: “Border widths use --border-width- naming pattern”.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@libs/ui/src/tokens/components/atoms/_textarea.css` at line 84, Rename the CSS custom property --border-textarea-width to follow the repository convention --border-width-textarea in the tokens file (replace the declaration in _textarea.css), and update the consumer in the textarea component to read the new token (update any references in libs/ui/src/atoms/textarea.tsx that use --border-textarea-width to --border-width-textarea); ensure both declaration and usage are changed in the same commit so consumers compile without errors.libs/ui/src/tokens/components/molecules/_combobox.css (1)
13-13: 🛠️ Refactor suggestion | 🟠 Majorrefactor(combobox-tokens): give derived text tokens explicit suffixes
--color-combobox-placeholderand--color-combobox-trigger-hoverare derived colour tokens, but their names still omit the-fgsuffix. Please rename them and the corresponding consumers inlibs/ui/src/molecules/combobox.tsxto keep the token layer explicit.As per coding guidelines
libs/ui/src/tokens/**/*.css: “Token reference layer may omit -bg/-fg/-border suffixes; derived layer must use -bg, -fg, or -border”.Also applies to: 38-38
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@libs/ui/src/tokens/components/molecules/_combobox.css` at line 13, Rename the derived color tokens to include the -fg suffix and update their consumers: change --color-combobox-placeholder to --color-combobox-placeholder-fg and --color-combobox-trigger-hover to --color-combobox-trigger-hover-fg in libs/ui/src/tokens/components/molecules/_combobox.css, then update all references in libs/ui/src/molecules/combobox.tsx to use the new token names (including any variable imports/usages), and ensure the tokens are exported/available after rename so styles compile.libs/ui/src/molecules/search-form.tsx (1)
21-28: 🛠️ Refactor suggestion | 🟠 Majorrefactor(search-form): keep SearchForm state styling on SearchForm tokens
SearchFormis still pulling hover/focus border, ring, and clear-button background states fromInput(border-input-*,outline-input-ring,bg-input-*). That keeps this molecule coupled to another component’s token surface instead of its ownlibs/ui/src/tokens/components/molecules/_search-form.csscontract.As per coding guidelines
libs/ui/src/**/*.{tsx,ts}: “Always use tv() with component-specific token classes for styling components”.Also applies to: 41-41
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@libs/ui/src/molecules/search-form.tsx` around lines 21 - 28, SearchForm is using Input token classes (border-input-*, outline-input-ring, bg-input-*) for hover/focus/ring and clear-button styles, coupling the molecule to Input tokens; update the SearchForm styling to use its own component-specific token classes from the SearchForm tokens contract (the classes defined in _search-form.css) and switch the class composition to tv() tokens for the component (replace occurrences of "border-input-*" / "outline-input-ring" / "bg-input-*" in SearchForm and its clear-button with the corresponding SearchForm token classes and ensure hover/focus/ring states use those SearchForm tokens instead of Input tokens).libs/ui/src/molecules/combobox.tsx (1)
188-188:⚠️ Potential issue | 🟡 Minorfix(combobox): map the chevron size for every public size
resolvedChevronIconSizestill collapses every non-smvariant tomd, sosize="lg"renders the same chevron asmd. That leaves the trigger icon out of scale with the public size API.Also applies to: 301-307
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@libs/ui/src/molecules/combobox.tsx` at line 188, resolvedChevronIconSize currently maps any non-"sm" size to "md", causing "lg" triggers to render an undersized chevron; update the mapping so each public size maps to the correct icon size (e.g., "sm" -> "sm", "md" -> "md", "lg" -> "lg" or whatever the design tokens require) by changing the logic in the combobox component where resolvedChevronIconSize is computed and applying the same fix to the analogous mapping around lines 301-307 (search for any other resolved*IconSize variables). Use a small switch or lookup object keyed by the component prop size to ensure every public size gets the matching chevron icon size.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@libs/ui/src/molecules/select.tsx`:
- Around line 627-638: The parent is currently providing a fallback default for
StatusText (statusProp ?? contextValidateStatus), which duplicates the child's
own defaulting logic; change this to let StatusText own its default by removing
the context fallback — i.e., stop using contextValidateStatus as the nullish
fallback and pass only statusProp (or undefined) to StatusText; adjust the local
symbol effectiveStatus (or inline the prop) so it no longer coalesces to
contextValidateStatus and simply forwards statusProp, relying on StatusText to
apply its default.
In `@libs/ui/src/tokens/_layout.css`:
- Around line 2-4: Remove the unsafe global fallbacks --reference-width: 100%
and --z-index: 1 from the shared layout tokens; instead, delete those defaults
from _layout.css and add explicit, component-level fallbacks in each overlay
component (Menu, Select, Combobox, Toast) using the correct overlay token values
(e.g., overlay-specific width and z-index) so portalled dropdowns don’t inherit
width:100% or low z-index; update the CSS in the component files (menu.tsx,
select.tsx, combobox.tsx, toast.tsx) to provide local --reference-width and
--z-index fallbacks appropriate for that component.
In `@libs/ui/src/tokens/components/atoms/_textarea.css`:
- Around line 39-40: The focus border token --color-textarea-border-focus
currently points at undefined --color-textarea-accent; update the definition in
_textarea.css to point directly at the new form-control focus token (e.g. set
--color-textarea-border-focus: var(--color-form-control-border-focus)) or
reintroduce a concrete --color-textarea-accent value so that
focus:border-textarea-border-focus used in libs/ui/src/atoms/textarea.tsx
resolves to a valid colour.
In `@libs/ui/src/tokens/components/molecules/_combobox.css`:
- Around line 4-5: Reintroduce the CSS custom properties that the Combobox
component still expects: add --color-combobox-bg (map it to
--color-form-control-bg or appropriate token) and re-add
--padding-combobox-input-sm, --padding-combobox-input-md,
--padding-combobox-input-lg (map to your spacing scale) in _combobox.css so the
utility classes used by the component (bg-combobox-bg and p-combobox-input-sm /
p-combobox-input-md / p-combobox-input-lg referenced in combobox.tsx) resolve
correctly; alternatively, if you prefer migration, update the combobox.tsx
usages of bg-combobox-bg and p-combobox-input-* to the new token names across
the component and its size variants to keep behavior consistent.
In `@libs/ui/src/tokens/components/molecules/_select.css`:
- Around line 19-24: The select trigger lost its default border token; add a
base token definition for --color-select-trigger-border in
libs/ui/src/tokens/components/molecules/_select.css so that the default border
color is set (e.g., map it to var(--color-form-control-border)) alongside the
existing hover/focus variants; this will restore the border used by
molecules/select.tsx which applies border-select-trigger-border.
---
Outside diff comments:
In `@libs/ui/src/molecules/select.tsx`:
- Around line 108-134: The size mapping for the Select control is incomplete: xs
and lg lack the standardized form-control height/radius and chevron sizing that
sm and md have, causing inconsistent rendering; update the size object (keys xs
and lg) to mirror the sm/md pattern by adding the appropriate form-control and
rounded classes (e.g., h-form-control-xs / rounded-select-xs for xs and
h-form-control-lg / rounded-select-lg for lg) and ensure the trigger class
includes the correct p-select-trigger-<size> and text-select-trigger-<size> so
chevron sizing no longer collapses to md (refer to the existing sm and md
entries in the size mapping to copy the exact class composition).
---
Duplicate comments:
In `@libs/ui/src/molecules/combobox.tsx`:
- Line 188: resolvedChevronIconSize currently maps any non-"sm" size to "md",
causing "lg" triggers to render an undersized chevron; update the mapping so
each public size maps to the correct icon size (e.g., "sm" -> "sm", "md" ->
"md", "lg" -> "lg" or whatever the design tokens require) by changing the logic
in the combobox component where resolvedChevronIconSize is computed and applying
the same fix to the analogous mapping around lines 301-307 (search for any other
resolved*IconSize variables). Use a small switch or lookup object keyed by the
component prop size to ensure every public size gets the matching chevron icon
size.
In `@libs/ui/src/molecules/search-form.tsx`:
- Around line 21-28: SearchForm is using Input token classes (border-input-*,
outline-input-ring, bg-input-*) for hover/focus/ring and clear-button styles,
coupling the molecule to Input tokens; update the SearchForm styling to use its
own component-specific token classes from the SearchForm tokens contract (the
classes defined in _search-form.css) and switch the class composition to tv()
tokens for the component (replace occurrences of "border-input-*" /
"outline-input-ring" / "bg-input-*" in SearchForm and its clear-button with the
corresponding SearchForm token classes and ensure hover/focus/ring states use
those SearchForm tokens instead of Input tokens).
In `@libs/ui/src/tokens/components/atoms/_textarea.css`:
- Line 84: Rename the CSS custom property --border-textarea-width to follow the
repository convention --border-width-textarea in the tokens file (replace the
declaration in _textarea.css), and update the consumer in the textarea component
to read the new token (update any references in libs/ui/src/atoms/textarea.tsx
that use --border-textarea-width to --border-width-textarea); ensure both
declaration and usage are changed in the same commit so consumers compile
without errors.
In `@libs/ui/src/tokens/components/molecules/_combobox.css`:
- Line 13: Rename the derived color tokens to include the -fg suffix and update
their consumers: change --color-combobox-placeholder to
--color-combobox-placeholder-fg and --color-combobox-trigger-hover to
--color-combobox-trigger-hover-fg in
libs/ui/src/tokens/components/molecules/_combobox.css, then update all
references in libs/ui/src/molecules/combobox.tsx to use the new token names
(including any variable imports/usages), and ensure the tokens are
exported/available after rename so styles compile.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 1db9e666-2851-4a56-b39c-c1989fae9ff7
📒 Files selected for processing (13)
libs/ui/src/atoms/input.tsxlibs/ui/src/atoms/numeric-input.tsxlibs/ui/src/atoms/textarea.tsxlibs/ui/src/molecules/combobox.tsxlibs/ui/src/molecules/search-form.tsxlibs/ui/src/molecules/select.tsxlibs/ui/src/tokens/_layout.csslibs/ui/src/tokens/components/atoms/_input.csslibs/ui/src/tokens/components/atoms/_numeric-input.csslibs/ui/src/tokens/components/atoms/_textarea.csslibs/ui/src/tokens/components/molecules/_combobox.csslibs/ui/src/tokens/components/molecules/_search-form.csslibs/ui/src/tokens/components/molecules/_select.css
KaiUweCZE
approved these changes
Mar 12, 2026
This was referenced Apr 27, 2026
Merged
5 tasks
This was referenced Jun 17, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
…mponent consistency
Summary by CodeRabbit
New Features
Improvements
Documentation