From b6ece4eec2af7a0257eefedc3a9ce03c565f383f Mon Sep 17 00:00:00 2001 From: Joshua Pare Date: Tue, 17 Mar 2026 15:46:01 -0500 Subject: [PATCH 01/16] feat(base-ui): expand ComponentSize to 5-tier and ComponentColor to 8 values Add xs/xl to size scale and discovery/secondary to color palette. --- packages/base-ui/src/system/types.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/base-ui/src/system/types.ts b/packages/base-ui/src/system/types.ts index d9833e8..e451bed 100644 --- a/packages/base-ui/src/system/types.ts +++ b/packages/base-ui/src/system/types.ts @@ -1,6 +1,6 @@ export type ComponentVariant = 'solid' | 'soft' | 'outline' | 'ghost'; -export type ComponentColor = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info'; -export type ComponentSize = 'sm' | 'md' | 'lg'; +export type ComponentColor = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'discovery' | 'secondary'; +export type ComponentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; export type Spacing = 0 | 1 | 2 | 3 | 4; export type SurfaceElevation = 0 | 1 | 2 | 3; From 6ec4aaf6fe99425188e8c1e55c8c8e656e21dc51 Mon Sep 17 00:00:00 2001 From: Joshua Pare Date: Tue, 17 Mar 2026 16:21:38 -0500 Subject: [PATCH 02/16] feat(base-ui): desktop-native size tokens + discovery/secondary colors Shift all component sizing tokens to desktop-native scale (18/22/26/32/40px) and add discovery (purple) + secondary (cyan) color tokens across all 7 theme variants. --- packages/base-ui/src/theme/styles.css | 501 +++++++++++++++++--------- 1 file changed, 329 insertions(+), 172 deletions(-) diff --git a/packages/base-ui/src/theme/styles.css b/packages/base-ui/src/theme/styles.css index 09e0a44..c26c846 100644 --- a/packages/base-ui/src/theme/styles.css +++ b/packages/base-ui/src/theme/styles.css @@ -109,6 +109,7 @@ --ov-space-stack-sm: var(--ov-primitive-space-2); --ov-space-stack-md: var(--ov-primitive-space-3); --ov-space-stack-lg: var(--ov-primitive-space-4); + --ov-space-stack-xs: var(--ov-primitive-space-1); --ov-radius-control: var(--ov-primitive-radius-md); --ov-radius-surface: var(--ov-primitive-radius-lg); @@ -118,89 +119,139 @@ --ov-duration-panel: var(--ov-primitive-duration-normal); --ov-ease-standard: var(--ov-primitive-ease-standard); - --ov-control-height-sm: 28px; - --ov-control-height-md: 36px; - --ov-control-height-lg: 42px; + --ov-control-height-xs: 18px; + --ov-control-height-sm: 22px; + --ov-control-height-md: 26px; + --ov-control-height-lg: 32px; + --ov-control-height-xl: 40px; --ov-list-row-height: 34px; --ov-panel-padding: 16px; - --ov-size-button-height-sm: 28px; - --ov-size-button-height-md: 36px; - --ov-size-button-height-lg: 44px; - --ov-size-button-padding-inline-sm: 10px; - --ov-size-button-padding-inline-md: 12px; - --ov-size-button-padding-inline-lg: 22px; - --ov-size-button-font-size-sm: var(--ov-font-size-caption); - --ov-size-button-font-size-md: var(--ov-font-size-body); - --ov-size-button-font-size-lg: var(--ov-primitive-font-size-16); - --ov-size-card-padding-inline-sm: 12px; - --ov-size-card-padding-inline-md: 16px; - --ov-size-card-padding-inline-lg: 24px; - --ov-size-card-padding-block-sm: 10px; - --ov-size-card-padding-block-md: 16px; - --ov-size-card-padding-block-lg: 22px; - --ov-size-card-gap-sm: 8px; - --ov-size-card-gap-md: 12px; - --ov-size-card-gap-lg: 16px; - --ov-size-card-footer-padding-block-sm: 6px; - --ov-size-card-footer-padding-block-md: 10px; - --ov-size-card-footer-padding-block-lg: 12px; - --ov-size-card-footer-gap-sm: 8px; - --ov-size-card-footer-gap-md: 10px; - --ov-size-card-footer-gap-lg: 12px; - --ov-size-card-action-height-sm: 24px; - --ov-size-card-action-height-md: 30px; - --ov-size-card-action-height-lg: 38px; - --ov-size-card-action-padding-inline-sm: 8px; - --ov-size-card-action-padding-inline-md: 10px; - --ov-size-card-action-padding-inline-lg: 16px; - --ov-size-card-action-font-size-sm: var(--ov-font-size-caption); - --ov-size-card-action-font-size-md: var(--ov-font-size-body); - --ov-size-card-action-font-size-lg: var(--ov-primitive-font-size-16); - --ov-size-card-title-font-size-sm: var(--ov-primitive-font-size-13); - --ov-size-card-title-font-size-md: var(--ov-font-size-body); - --ov-size-card-title-font-size-lg: var(--ov-primitive-font-size-16); - --ov-size-card-body-font-size-sm: var(--ov-primitive-font-size-13); - --ov-size-card-body-font-size-md: var(--ov-font-size-body); - --ov-size-card-body-font-size-lg: var(--ov-primitive-font-size-16); + --ov-size-button-height-xs: 18px; + --ov-size-button-height-sm: 22px; + --ov-size-button-height-md: 26px; + --ov-size-button-height-lg: 32px; + --ov-size-button-height-xl: 40px; + --ov-size-button-padding-inline-xs: 4px; + --ov-size-button-padding-inline-sm: 6px; + --ov-size-button-padding-inline-md: 8px; + --ov-size-button-padding-inline-lg: 12px; + --ov-size-button-padding-inline-xl: 16px; + --ov-size-button-font-size-xs: var(--ov-primitive-font-size-11); + --ov-size-button-font-size-sm: var(--ov-primitive-font-size-11); + --ov-size-button-font-size-md: var(--ov-primitive-font-size-12); + --ov-size-button-font-size-lg: var(--ov-primitive-font-size-13); + --ov-size-button-font-size-xl: var(--ov-primitive-font-size-14); + --ov-size-card-padding-inline-xs: 6px; + --ov-size-card-padding-inline-sm: 8px; + --ov-size-card-padding-inline-md: 12px; + --ov-size-card-padding-inline-lg: 16px; + --ov-size-card-padding-inline-xl: 24px; + --ov-size-card-padding-block-xs: 4px; + --ov-size-card-padding-block-sm: 6px; + --ov-size-card-padding-block-md: 10px; + --ov-size-card-padding-block-lg: 16px; + --ov-size-card-padding-block-xl: 22px; + --ov-size-card-gap-xs: 4px; + --ov-size-card-gap-sm: 6px; + --ov-size-card-gap-md: 8px; + --ov-size-card-gap-lg: 12px; + --ov-size-card-gap-xl: 16px; + --ov-size-card-footer-padding-block-xs: 3px; + --ov-size-card-footer-padding-block-sm: 4px; + --ov-size-card-footer-padding-block-md: 6px; + --ov-size-card-footer-padding-block-lg: 10px; + --ov-size-card-footer-padding-block-xl: 12px; + --ov-size-card-footer-gap-xs: 4px; + --ov-size-card-footer-gap-sm: 6px; + --ov-size-card-footer-gap-md: 8px; + --ov-size-card-footer-gap-lg: 10px; + --ov-size-card-footer-gap-xl: 12px; + --ov-size-card-action-height-xs: 16px; + --ov-size-card-action-height-sm: 20px; + --ov-size-card-action-height-md: 24px; + --ov-size-card-action-height-lg: 30px; + --ov-size-card-action-height-xl: 38px; + --ov-size-card-action-padding-inline-xs: 4px; + --ov-size-card-action-padding-inline-sm: 6px; + --ov-size-card-action-padding-inline-md: 8px; + --ov-size-card-action-padding-inline-lg: 10px; + --ov-size-card-action-padding-inline-xl: 16px; + --ov-size-card-action-font-size-xs: var(--ov-primitive-font-size-11); + --ov-size-card-action-font-size-sm: var(--ov-primitive-font-size-11); + --ov-size-card-action-font-size-md: var(--ov-primitive-font-size-12); + --ov-size-card-action-font-size-lg: var(--ov-primitive-font-size-14); + --ov-size-card-action-font-size-xl: var(--ov-primitive-font-size-16); + --ov-size-card-title-font-size-xs: var(--ov-primitive-font-size-11); + --ov-size-card-title-font-size-sm: var(--ov-primitive-font-size-12); + --ov-size-card-title-font-size-md: var(--ov-primitive-font-size-13); + --ov-size-card-title-font-size-lg: var(--ov-primitive-font-size-14); + --ov-size-card-title-font-size-xl: var(--ov-primitive-font-size-16); + --ov-size-card-body-font-size-xs: var(--ov-primitive-font-size-11); + --ov-size-card-body-font-size-sm: var(--ov-primitive-font-size-12); + --ov-size-card-body-font-size-md: var(--ov-primitive-font-size-13); + --ov-size-card-body-font-size-lg: var(--ov-primitive-font-size-14); + --ov-size-card-body-font-size-xl: var(--ov-primitive-font-size-16); + --ov-size-card-description-font-size-xs: var(--ov-primitive-font-size-11); --ov-size-card-description-font-size-sm: var(--ov-primitive-font-size-11); - --ov-size-card-description-font-size-md: var(--ov-font-size-caption); - --ov-size-card-description-font-size-lg: var(--ov-primitive-font-size-13); - --ov-size-card-stat-font-size-sm: 1.25rem; - --ov-size-card-stat-font-size-md: 1.625rem; - --ov-size-card-stat-font-size-lg: 2rem; + --ov-size-card-description-font-size-md: var(--ov-primitive-font-size-11); + --ov-size-card-description-font-size-lg: var(--ov-primitive-font-size-12); + --ov-size-card-description-font-size-xl: var(--ov-primitive-font-size-13); + --ov-size-card-stat-font-size-xs: 0.875rem; + --ov-size-card-stat-font-size-sm: 1rem; + --ov-size-card-stat-font-size-md: 1.25rem; + --ov-size-card-stat-font-size-lg: 1.625rem; + --ov-size-card-stat-font-size-xl: 2rem; + --ov-size-card-eyebrow-font-size-xs: var(--ov-primitive-font-size-11); --ov-size-card-eyebrow-font-size-sm: var(--ov-primitive-font-size-11); --ov-size-card-eyebrow-font-size-md: var(--ov-primitive-font-size-11); - --ov-size-card-eyebrow-font-size-lg: var(--ov-primitive-font-size-12); - --ov-size-card-indicator-dot-sm: 6px; - --ov-size-card-indicator-dot-md: 8px; - --ov-size-card-indicator-dot-lg: 10px; - --ov-size-card-group-gap-sm: 8px; - --ov-size-card-group-gap-md: 12px; - --ov-size-card-group-gap-lg: 16px; + --ov-size-card-eyebrow-font-size-lg: var(--ov-primitive-font-size-11); + --ov-size-card-eyebrow-font-size-xl: var(--ov-primitive-font-size-12); + --ov-size-card-indicator-dot-xs: 4px; + --ov-size-card-indicator-dot-sm: 5px; + --ov-size-card-indicator-dot-md: 6px; + --ov-size-card-indicator-dot-lg: 8px; + --ov-size-card-indicator-dot-xl: 10px; + --ov-size-card-group-gap-xs: 4px; + --ov-size-card-group-gap-sm: 6px; + --ov-size-card-group-gap-md: 8px; + --ov-size-card-group-gap-lg: 12px; + --ov-size-card-group-gap-xl: 16px; + --ov-size-icon-button-icon-xs: 12px; --ov-size-icon-button-icon-sm: 14px; --ov-size-icon-button-icon-md: 16px; --ov-size-icon-button-icon-lg: 18px; + --ov-size-icon-button-icon-xl: 20px; --ov-size-button-group-gap: 8px; --ov-size-chip-radius: var(--ov-radius-control); --ov-size-chip-radius-sm: var(--ov-primitive-radius-sm); --ov-size-chip-radius-md: var(--ov-radius-control); --ov-size-chip-radius-lg: var(--ov-radius-control); --ov-size-chip-group-gap: 6px; - --ov-size-chip-height-sm: 20px; - --ov-size-chip-height-md: 24px; - --ov-size-chip-height-lg: 28px; - --ov-size-chip-padding-inline-sm: 8px; - --ov-size-chip-padding-inline-md: 10px; - --ov-size-chip-padding-inline-lg: 12px; + --ov-size-chip-height-xs: 16px; + --ov-size-chip-height-sm: 18px; + --ov-size-chip-height-md: 20px; + --ov-size-chip-height-lg: 24px; + --ov-size-chip-height-xl: 28px; + --ov-size-chip-padding-inline-xs: 4px; + --ov-size-chip-padding-inline-sm: 6px; + --ov-size-chip-padding-inline-md: 8px; + --ov-size-chip-padding-inline-lg: 10px; + --ov-size-chip-padding-inline-xl: 12px; + --ov-size-chip-font-size-xs: var(--ov-primitive-font-size-11); --ov-size-chip-font-size-sm: var(--ov-primitive-font-size-11); - --ov-size-chip-font-size-md: var(--ov-font-size-caption); - --ov-size-chip-font-size-lg: var(--ov-primitive-font-size-13); - --ov-size-chip-gap-sm: 4px; - --ov-size-chip-gap-md: 6px; - --ov-size-chip-gap-lg: 8px; + --ov-size-chip-font-size-md: var(--ov-primitive-font-size-11); + --ov-size-chip-font-size-lg: var(--ov-primitive-font-size-12); + --ov-size-chip-font-size-xl: var(--ov-primitive-font-size-13); + --ov-size-chip-gap-xs: 2px; + --ov-size-chip-gap-sm: 3px; + --ov-size-chip-gap-md: 4px; + --ov-size-chip-gap-lg: 6px; + --ov-size-chip-gap-xl: 8px; + --ov-size-chip-icon-size-xs: 10px; --ov-size-chip-icon-size-sm: 12px; - --ov-size-chip-icon-size-md: 14px; - --ov-size-chip-icon-size-lg: 16px; + --ov-size-chip-icon-size-md: 12px; + --ov-size-chip-icon-size-lg: 14px; + --ov-size-chip-icon-size-xl: 16px; --ov-size-typography-text-sm: var(--ov-font-size-caption); --ov-size-typography-text-md: var(--ov-font-size-body); --ov-size-typography-text-lg: var(--ov-primitive-font-size-16); @@ -224,146 +275,224 @@ --ov-size-typography-hotkey-padding-block: 3px; --ov-size-typography-hotkey-radius: calc(var(--ov-radius-control) - 2px); --ov-size-typography-hotkey-min-height: 22px; - --ov-size-avatar-sm: 24px; - --ov-size-avatar-md: 32px; - --ov-size-avatar-lg: 40px; - --ov-size-avatar-font-size-sm: var(--ov-font-size-caption); - --ov-size-avatar-font-size-md: var(--ov-primitive-font-size-13); - --ov-size-avatar-font-size-lg: var(--ov-font-size-body); + --ov-size-avatar-xs: 18px; + --ov-size-avatar-sm: 22px; + --ov-size-avatar-md: 26px; + --ov-size-avatar-lg: 32px; + --ov-size-avatar-xl: 40px; + --ov-size-avatar-font-size-xs: var(--ov-primitive-font-size-11); + --ov-size-avatar-font-size-sm: var(--ov-primitive-font-size-11); + --ov-size-avatar-font-size-md: var(--ov-primitive-font-size-12); + --ov-size-avatar-font-size-lg: var(--ov-primitive-font-size-13); + --ov-size-avatar-font-size-xl: var(--ov-primitive-font-size-14); + --ov-size-avatar-icon-size-xs: 10px; --ov-size-avatar-icon-size-sm: 12px; - --ov-size-avatar-icon-size-md: 16px; - --ov-size-avatar-icon-size-lg: 18px; + --ov-size-avatar-icon-size-md: 14px; + --ov-size-avatar-icon-size-lg: 16px; + --ov-size-avatar-icon-size-xl: 18px; --ov-size-avatar-radius-rounded: var(--ov-radius-control); - --ov-size-avatar-group-overlap-sm: 8px; - --ov-size-avatar-group-overlap-md: 10px; - --ov-size-avatar-group-overlap-lg: 12px; - --ov-size-choice-control-sm: 16px; - --ov-size-choice-control-md: 18px; - --ov-size-choice-control-lg: 20px; - --ov-size-choice-indicator-sm: 10px; - --ov-size-choice-indicator-md: 12px; - --ov-size-choice-indicator-lg: 14px; - --ov-size-choice-gap-sm: 8px; - --ov-size-choice-gap-md: 10px; - --ov-size-choice-gap-lg: 12px; + --ov-size-avatar-group-overlap-xs: 6px; + --ov-size-avatar-group-overlap-sm: 7px; + --ov-size-avatar-group-overlap-md: 8px; + --ov-size-avatar-group-overlap-lg: 10px; + --ov-size-avatar-group-overlap-xl: 12px; + --ov-size-choice-control-xs: 12px; + --ov-size-choice-control-sm: 14px; + --ov-size-choice-control-md: 16px; + --ov-size-choice-control-lg: 18px; + --ov-size-choice-control-xl: 20px; + --ov-size-choice-indicator-xs: 8px; + --ov-size-choice-indicator-sm: 9px; + --ov-size-choice-indicator-md: 10px; + --ov-size-choice-indicator-lg: 12px; + --ov-size-choice-indicator-xl: 14px; + --ov-size-choice-gap-xs: 6px; + --ov-size-choice-gap-sm: 7px; + --ov-size-choice-gap-md: 8px; + --ov-size-choice-gap-lg: 10px; + --ov-size-choice-gap-xl: 12px; --ov-size-choice-radius: var(--ov-primitive-radius-sm); - --ov-size-switch-track-width-sm: 34px; - --ov-size-switch-track-width-md: 40px; - --ov-size-switch-track-width-lg: 46px; - --ov-size-switch-track-height-sm: 20px; - --ov-size-switch-track-height-md: 24px; - --ov-size-switch-track-height-lg: 28px; - --ov-size-switch-thumb-size-sm: 16px; - --ov-size-switch-thumb-size-md: 20px; - --ov-size-switch-thumb-size-lg: 24px; - --ov-size-switch-gap-sm: 8px; - --ov-size-switch-gap-md: 10px; - --ov-size-switch-gap-lg: 12px; + --ov-size-switch-track-width-xs: 26px; + --ov-size-switch-track-width-sm: 30px; + --ov-size-switch-track-width-md: 34px; + --ov-size-switch-track-width-lg: 40px; + --ov-size-switch-track-width-xl: 46px; + --ov-size-switch-track-height-xs: 14px; + --ov-size-switch-track-height-sm: 16px; + --ov-size-switch-track-height-md: 20px; + --ov-size-switch-track-height-lg: 24px; + --ov-size-switch-track-height-xl: 28px; + --ov-size-switch-thumb-size-xs: 10px; + --ov-size-switch-thumb-size-sm: 12px; + --ov-size-switch-thumb-size-md: 16px; + --ov-size-switch-thumb-size-lg: 20px; + --ov-size-switch-thumb-size-xl: 24px; + --ov-size-switch-gap-xs: 6px; + --ov-size-switch-gap-sm: 7px; + --ov-size-switch-gap-md: 8px; + --ov-size-switch-gap-lg: 10px; + --ov-size-switch-gap-xl: 12px; --ov-size-list-item-gap: 4px; --ov-size-list-item-radius: var(--ov-radius-control); + --ov-size-list-item-height-xs: 18px; --ov-size-list-item-height-sm: 22px; - --ov-size-list-item-height-md: 30px; - --ov-size-list-item-height-lg: 36px; - --ov-size-list-item-padding-inline-sm: 7px; - --ov-size-list-item-padding-inline-md: 10px; - --ov-size-list-item-padding-inline-lg: 12px; - --ov-size-list-group-label-font-size-sm: var(--ov-font-size-caption); - --ov-size-list-group-label-font-size-md: var(--ov-primitive-font-size-13); - --ov-size-list-group-label-font-size-lg: var(--ov-font-size-body); + --ov-size-list-item-height-md: 26px; + --ov-size-list-item-height-lg: 30px; + --ov-size-list-item-height-xl: 36px; + --ov-size-list-item-padding-inline-xs: 4px; + --ov-size-list-item-padding-inline-sm: 6px; + --ov-size-list-item-padding-inline-md: 8px; + --ov-size-list-item-padding-inline-lg: 10px; + --ov-size-list-item-padding-inline-xl: 12px; + --ov-size-list-group-label-font-size-xs: var(--ov-primitive-font-size-11); + --ov-size-list-group-label-font-size-sm: var(--ov-primitive-font-size-11); + --ov-size-list-group-label-font-size-md: var(--ov-primitive-font-size-12); + --ov-size-list-group-label-font-size-lg: var(--ov-primitive-font-size-13); + --ov-size-list-group-label-font-size-xl: var(--ov-primitive-font-size-14); + --ov-size-list-group-label-gap-top-xs: 1px; --ov-size-list-group-label-gap-top-sm: 2px; - --ov-size-list-group-label-gap-top-md: 4px; - --ov-size-list-group-label-gap-top-lg: 6px; - --ov-size-list-group-label-gap-after-sm: 4px; - --ov-size-list-group-label-gap-after-md: 6px; - --ov-size-list-group-label-gap-after-lg: 8px; + --ov-size-list-group-label-gap-top-md: 3px; + --ov-size-list-group-label-gap-top-lg: 4px; + --ov-size-list-group-label-gap-top-xl: 6px; + --ov-size-list-group-label-gap-after-xs: 2px; + --ov-size-list-group-label-gap-after-sm: 3px; + --ov-size-list-group-label-gap-after-md: 4px; + --ov-size-list-group-label-gap-after-lg: 6px; + --ov-size-list-group-label-gap-after-xl: 8px; + --ov-size-separator-thickness-xs: 1px; --ov-size-separator-thickness-sm: 1px; - --ov-size-separator-thickness-md: 2px; - --ov-size-separator-thickness-lg: 3px; - --ov-size-separator-inset-sm: 8px; - --ov-size-separator-inset-md: 12px; - --ov-size-separator-inset-lg: 16px; + --ov-size-separator-thickness-md: 1px; + --ov-size-separator-thickness-lg: 2px; + --ov-size-separator-thickness-xl: 3px; + --ov-size-separator-inset-xs: 4px; + --ov-size-separator-inset-sm: 6px; + --ov-size-separator-inset-md: 8px; + --ov-size-separator-inset-lg: 12px; + --ov-size-separator-inset-xl: 16px; + --ov-size-separator-label-font-size-xs: var(--ov-primitive-font-size-11); --ov-size-separator-label-font-size-sm: var(--ov-primitive-font-size-11); - --ov-size-separator-label-font-size-md: var(--ov-font-size-caption); - --ov-size-separator-label-font-size-lg: var(--ov-primitive-font-size-13); + --ov-size-separator-label-font-size-md: var(--ov-primitive-font-size-11); + --ov-size-separator-label-font-size-lg: var(--ov-primitive-font-size-12); + --ov-size-separator-label-font-size-xl: var(--ov-primitive-font-size-13); --ov-size-separator-min-block-size: 20px; --ov-size-action-list-gap: 4px; - --ov-size-action-list-item-height-sm: 24px; - --ov-size-action-list-item-height-md: 30px; - --ov-size-action-list-item-height-lg: 36px; - --ov-size-action-list-item-padding-inline-sm: 8px; - --ov-size-action-list-item-padding-inline-md: 12px; - --ov-size-action-list-item-padding-inline-lg: 14px; + --ov-size-action-list-item-height-xs: 18px; + --ov-size-action-list-item-height-sm: 22px; + --ov-size-action-list-item-height-md: 26px; + --ov-size-action-list-item-height-lg: 30px; + --ov-size-action-list-item-height-xl: 36px; + --ov-size-action-list-item-padding-inline-xs: 4px; + --ov-size-action-list-item-padding-inline-sm: 6px; + --ov-size-action-list-item-padding-inline-md: 8px; + --ov-size-action-list-item-padding-inline-lg: 12px; + --ov-size-action-list-item-padding-inline-xl: 14px; + --ov-size-action-list-icon-size-xs: 12px; --ov-size-action-list-icon-size-sm: 14px; --ov-size-action-list-icon-size-md: 16px; --ov-size-action-list-icon-size-lg: 18px; - --ov-size-action-list-shortcut-min-width-sm: 28px; - --ov-size-action-list-shortcut-min-width-md: 34px; - --ov-size-action-list-shortcut-min-width-lg: 40px; + --ov-size-action-list-icon-size-xl: 20px; + --ov-size-action-list-shortcut-min-width-xs: 22px; + --ov-size-action-list-shortcut-min-width-sm: 26px; + --ov-size-action-list-shortcut-min-width-md: 30px; + --ov-size-action-list-shortcut-min-width-lg: 34px; + --ov-size-action-list-shortcut-min-width-xl: 40px; --ov-size-table-radius: var(--ov-radius-surface); - --ov-size-table-cell-padding-inline-sm: 10px; - --ov-size-table-cell-padding-inline-md: 14px; - --ov-size-table-cell-padding-inline-lg: 16px; - --ov-size-table-cell-padding-block-sm: 7px; - --ov-size-table-cell-padding-block-md: 10px; - --ov-size-table-cell-padding-block-lg: 12px; - --ov-size-table-header-font-size-sm: var(--ov-primitive-font-size-13); - --ov-size-table-header-font-size-md: var(--ov-font-size-body); - --ov-size-table-header-font-size-lg: var(--ov-primitive-font-size-16); - --ov-size-table-cell-font-size-sm: var(--ov-font-size-caption); - --ov-size-table-cell-font-size-md: var(--ov-font-size-body); - --ov-size-table-cell-font-size-lg: var(--ov-primitive-font-size-16); + --ov-size-table-cell-padding-inline-xs: 6px; + --ov-size-table-cell-padding-inline-sm: 8px; + --ov-size-table-cell-padding-inline-md: 10px; + --ov-size-table-cell-padding-inline-lg: 14px; + --ov-size-table-cell-padding-inline-xl: 16px; + --ov-size-table-cell-padding-block-xs: 3px; + --ov-size-table-cell-padding-block-sm: 4px; + --ov-size-table-cell-padding-block-md: 6px; + --ov-size-table-cell-padding-block-lg: 10px; + --ov-size-table-cell-padding-block-xl: 12px; + --ov-size-table-header-font-size-xs: var(--ov-primitive-font-size-11); + --ov-size-table-header-font-size-sm: var(--ov-primitive-font-size-11); + --ov-size-table-header-font-size-md: var(--ov-primitive-font-size-12); + --ov-size-table-header-font-size-lg: var(--ov-primitive-font-size-14); + --ov-size-table-header-font-size-xl: var(--ov-primitive-font-size-16); + --ov-size-table-cell-font-size-xs: var(--ov-primitive-font-size-11); + --ov-size-table-cell-font-size-sm: var(--ov-primitive-font-size-11); + --ov-size-table-cell-font-size-md: var(--ov-primitive-font-size-12); + --ov-size-table-cell-font-size-lg: var(--ov-primitive-font-size-14); + --ov-size-table-cell-font-size-xl: var(--ov-primitive-font-size-16); + --ov-size-table-caption-font-size-xs: var(--ov-primitive-font-size-11); --ov-size-table-caption-font-size-sm: var(--ov-primitive-font-size-11); - --ov-size-table-caption-font-size-md: var(--ov-font-size-caption); - --ov-size-table-caption-font-size-lg: var(--ov-primitive-font-size-13); - --ov-size-table-row-height-sm: 30px; - --ov-size-table-row-height-md: 36px; - --ov-size-table-row-height-lg: 44px; + --ov-size-table-caption-font-size-md: var(--ov-primitive-font-size-11); + --ov-size-table-caption-font-size-lg: var(--ov-primitive-font-size-12); + --ov-size-table-caption-font-size-xl: var(--ov-primitive-font-size-13); + --ov-size-table-row-height-xs: 22px; + --ov-size-table-row-height-sm: 26px; + --ov-size-table-row-height-md: 30px; + --ov-size-table-row-height-lg: 36px; + --ov-size-table-row-height-xl: 44px; --ov-size-table-resize-handle-width: 4px; --ov-size-table-expand-indent: 24px; --ov-size-table-nested-inset: 24px; - --ov-size-sheet-padding-sm: 8px; - --ov-size-sheet-padding-md: 16px; - --ov-size-sheet-padding-lg: 24px; + --ov-size-sheet-padding-xs: 4px; + --ov-size-sheet-padding-sm: 6px; + --ov-size-sheet-padding-md: 12px; + --ov-size-sheet-padding-lg: 16px; + --ov-size-sheet-padding-xl: 24px; --ov-size-container-sm: 640px; --ov-size-container-md: 768px; --ov-size-container-lg: 1024px; --ov-size-container-xl: 1280px; --ov-size-container-gutter: var(--ov-primitive-space-4); --ov-size-image-list-gap: var(--ov-primitive-space-2); - --ov-size-banner-padding-inline-sm: 10px; - --ov-size-banner-padding-inline-md: 14px; - --ov-size-banner-padding-inline-lg: 18px; - --ov-size-banner-padding-block-sm: 8px; - --ov-size-banner-padding-block-md: 12px; - --ov-size-banner-padding-block-lg: 16px; - --ov-size-banner-gap-sm: 8px; - --ov-size-banner-gap-md: 10px; - --ov-size-banner-gap-lg: 12px; - --ov-size-banner-icon-size-sm: 16px; - --ov-size-banner-icon-size-md: 18px; - --ov-size-banner-icon-size-lg: 20px; - --ov-size-banner-title-font-size-sm: var(--ov-primitive-font-size-13); - --ov-size-banner-title-font-size-md: var(--ov-font-size-body); - --ov-size-banner-title-font-size-lg: var(--ov-primitive-font-size-16); - --ov-size-banner-body-font-size-sm: var(--ov-font-size-caption); - --ov-size-banner-body-font-size-md: var(--ov-primitive-font-size-13); - --ov-size-banner-body-font-size-lg: var(--ov-font-size-body); - --ov-size-progress-height-sm: 4px; - --ov-size-progress-height-md: 6px; - --ov-size-progress-height-lg: 8px; + --ov-size-banner-padding-inline-xs: 6px; + --ov-size-banner-padding-inline-sm: 8px; + --ov-size-banner-padding-inline-md: 10px; + --ov-size-banner-padding-inline-lg: 14px; + --ov-size-banner-padding-inline-xl: 18px; + --ov-size-banner-padding-block-xs: 4px; + --ov-size-banner-padding-block-sm: 6px; + --ov-size-banner-padding-block-md: 8px; + --ov-size-banner-padding-block-lg: 12px; + --ov-size-banner-padding-block-xl: 16px; + --ov-size-banner-gap-xs: 4px; + --ov-size-banner-gap-sm: 6px; + --ov-size-banner-gap-md: 8px; + --ov-size-banner-gap-lg: 10px; + --ov-size-banner-gap-xl: 12px; + --ov-size-banner-icon-size-xs: 12px; + --ov-size-banner-icon-size-sm: 14px; + --ov-size-banner-icon-size-md: 16px; + --ov-size-banner-icon-size-lg: 18px; + --ov-size-banner-icon-size-xl: 20px; + --ov-size-banner-title-font-size-xs: var(--ov-primitive-font-size-11); + --ov-size-banner-title-font-size-sm: var(--ov-primitive-font-size-12); + --ov-size-banner-title-font-size-md: var(--ov-primitive-font-size-13); + --ov-size-banner-title-font-size-lg: var(--ov-primitive-font-size-14); + --ov-size-banner-title-font-size-xl: var(--ov-primitive-font-size-16); + --ov-size-banner-body-font-size-xs: var(--ov-primitive-font-size-11); + --ov-size-banner-body-font-size-sm: var(--ov-primitive-font-size-11); + --ov-size-banner-body-font-size-md: var(--ov-primitive-font-size-12); + --ov-size-banner-body-font-size-lg: var(--ov-primitive-font-size-13); + --ov-size-banner-body-font-size-xl: var(--ov-primitive-font-size-14); + --ov-size-progress-height-xs: 2px; + --ov-size-progress-height-sm: 3px; + --ov-size-progress-height-md: 4px; + --ov-size-progress-height-lg: 6px; + --ov-size-progress-height-xl: 8px; --ov-size-progress-radius: 999px; --ov-color-progress-track: var(--ov-color-bg-inset); --ov-color-progress-fill: var(--ov-color-brand-500); + --ov-size-scrollarea-scrollbar-xs: 4px; --ov-size-scrollarea-scrollbar-sm: 6px; --ov-size-scrollarea-scrollbar-md: 8px; --ov-size-scrollarea-scrollbar-lg: 10px; + --ov-size-scrollarea-scrollbar-xl: 12px; --ov-color-scrollarea-thumb: var(--ov-primitive-gray-500); --ov-color-scrollarea-thumb-hover: var(--ov-primitive-gray-600); --ov-color-scrollarea-track: transparent; - --ov-size-spinner-sm: 16px; - --ov-size-spinner-md: 20px; - --ov-size-spinner-lg: 28px; + --ov-size-spinner-xs: 12px; + --ov-size-spinner-sm: 14px; + --ov-size-spinner-md: 16px; + --ov-size-spinner-lg: 20px; + --ov-size-spinner-xl: 28px; --ov-size-drawer-handle-thickness: 4px; --ov-size-drawer-handle-length: 32px; --ov-color-drawer-handle: var(--ov-color-border-strong); @@ -402,6 +531,10 @@ --ov-color-danger-soft: rgb(196 95 95 / 0.17); --ov-color-info: #7092e8; --ov-color-info-soft: rgb(112 146 232 / 0.17); + --ov-color-discovery: var(--ov-primitive-purple-500); + --ov-color-discovery-soft: rgb(147 99 219 / 0.17); + --ov-color-secondary: var(--ov-primitive-cyan-500); + --ov-color-secondary-soft: rgb(63 176 201 / 0.17); --ov-color-state-hover: rgb(161 169 182 / 0.11); --ov-color-state-pressed: rgb(161 169 182 / 0.2); @@ -548,6 +681,10 @@ --ov-color-danger-soft: rgb(173 79 79 / 0.12); --ov-color-info: #5a7fe2; --ov-color-info-soft: rgb(90 127 226 / 0.12); + --ov-color-discovery: var(--ov-primitive-purple-600); + --ov-color-discovery-soft: rgb(124 78 196 / 0.12); + --ov-color-secondary: var(--ov-primitive-cyan-600); + --ov-color-secondary-soft: rgb(46 151 174 / 0.12); --ov-color-state-hover: rgb(75 85 100 / 0.08); --ov-color-state-pressed: rgb(75 85 100 / 0.14); @@ -653,6 +790,10 @@ --ov-color-danger-soft: rgb(255 159 159 / 0.24); --ov-color-info: #a6c8ff; --ov-color-info-soft: rgb(166 200 255 / 0.25); + --ov-color-discovery: var(--ov-primitive-purple-300); + --ov-color-discovery-soft: rgb(184 154 238 / 0.25); + --ov-color-secondary: var(--ov-primitive-cyan-300); + --ov-color-secondary-soft: rgb(122 212 232 / 0.25); --ov-color-state-hover: rgb(255 255 255 / 0.16); --ov-color-state-pressed: rgb(255 255 255 / 0.24); @@ -750,6 +891,10 @@ --ov-color-danger-soft: rgb(143 0 0 / 0.16); --ov-color-info: #004ad7; --ov-color-info-soft: rgb(0 74 215 / 0.16); + --ov-color-discovery: var(--ov-primitive-purple-600); + --ov-color-discovery-soft: rgb(124 78 196 / 0.16); + --ov-color-secondary: var(--ov-primitive-cyan-600); + --ov-color-secondary-soft: rgb(46 151 174 / 0.16); --ov-color-state-hover: rgb(0 0 0 / 0.08); --ov-color-state-pressed: rgb(0 0 0 / 0.14); @@ -852,6 +997,10 @@ --ov-color-danger-soft: rgb(212 85 85 / 0.15); --ov-color-info: var(--ov-color-brand-400); --ov-color-info-soft: rgb(99 145 255 / 0.15); + --ov-color-discovery: var(--ov-primitive-purple-500); + --ov-color-discovery-soft: rgb(147 99 219 / 0.15); + --ov-color-secondary: var(--ov-primitive-cyan-500); + --ov-color-secondary-soft: rgb(63 176 201 / 0.15); --ov-color-state-hover: rgb(160 170 185 / 0.09); --ov-color-state-pressed: rgb(160 170 185 / 0.16); @@ -897,6 +1046,10 @@ --ov-color-danger-soft: rgb(212 85 85 / 0.15); --ov-color-info: var(--ov-color-brand-400); --ov-color-info-soft: rgb(105 160 255 / 0.15); + --ov-color-discovery: var(--ov-primitive-purple-500); + --ov-color-discovery-soft: rgb(147 99 219 / 0.15); + --ov-color-secondary: var(--ov-primitive-cyan-500); + --ov-color-secondary-soft: rgb(63 176 201 / 0.15); --ov-color-state-hover: rgb(160 160 160 / 0.09); --ov-color-state-pressed: rgb(160 160 160 / 0.16); @@ -942,6 +1095,10 @@ --ov-color-danger-soft: rgb(212 85 85 / 0.13); --ov-color-info: var(--ov-color-brand-400); --ov-color-info-soft: rgb(107 155 255 / 0.13); + --ov-color-discovery: var(--ov-primitive-purple-500); + --ov-color-discovery-soft: rgb(147 99 219 / 0.13); + --ov-color-secondary: var(--ov-primitive-cyan-500); + --ov-color-secondary-soft: rgb(63 176 201 / 0.13); --ov-color-state-hover: rgb(160 165 175 / 0.08); --ov-color-state-pressed: rgb(160 165 175 / 0.14); From b550c9610416ce0936451a406a74563bcf75c170 Mon Sep 17 00:00:00 2001 From: Joshua Pare Date: Tue, 17 Mar 2026 16:29:48 -0500 Subject: [PATCH 03/16] feat(base-ui): Button xs/xl sizes + discovery/secondary colors Also: IconButton removes dense prop, fixes rectangular bug with physical min-width override, adds xs/xl size support. --- .../src/components/button/Button.module.css | 34 +++++++++++++++++++ .../src/components/button/Button.test.tsx | 24 +++++++++++++ .../icon-button/IconButton.module.css | 30 ++++------------ .../icon-button/IconButton.test.tsx | 30 +++++++++++++--- .../src/components/icon-button/IconButton.tsx | 4 +-- 5 files changed, 91 insertions(+), 31 deletions(-) diff --git a/packages/base-ui/src/components/button/Button.module.css b/packages/base-ui/src/components/button/Button.module.css index 37c53ea..d0afe24 100644 --- a/packages/base-ui/src/components/button/Button.module.css +++ b/packages/base-ui/src/components/button/Button.module.css @@ -53,6 +53,14 @@ cursor: not-allowed; } +.Root[data-ov-size='xs'] { + --_ov-control-height: var(--ov-size-button-height-xs); + --_ov-padding-inline: var(--ov-size-button-padding-inline-xs); + --_ov-font-size: var(--ov-size-button-font-size-xs); + --_ov-content-gap: var(--ov-space-stack-xs); + --_ov-decorator-size: var(--ov-size-icon-button-icon-xs); +} + .Root[data-ov-size='sm'] { --_ov-control-height: var(--ov-size-button-height-sm); --_ov-padding-inline: var(--ov-size-button-padding-inline-sm); @@ -69,6 +77,14 @@ --_ov-decorator-size: var(--ov-size-icon-button-icon-lg); } +.Root[data-ov-size='xl'] { + --_ov-control-height: var(--ov-size-button-height-xl); + --_ov-padding-inline: var(--ov-size-button-padding-inline-xl); + --_ov-font-size: var(--ov-size-button-font-size-xl); + --_ov-content-gap: var(--ov-space-inline-control); + --_ov-decorator-size: var(--ov-size-icon-button-icon-xl); +} + .Root[data-ov-color='neutral'] { --_ov-accent-bg: var(--ov-color-bg-surface-raised); --_ov-accent-fg: var(--ov-color-fg-default); @@ -114,6 +130,24 @@ --_ov-accent-ghost-fg: var(--ov-color-danger); } +.Root[data-ov-color='discovery'] { + --_ov-accent-bg: var(--ov-color-discovery); + --_ov-accent-fg: var(--ov-color-fg-inverse); + --_ov-accent-border: var(--ov-color-discovery); + --_ov-accent-soft-bg: var(--ov-color-discovery-soft); + --_ov-accent-soft-fg: var(--ov-color-discovery); + --_ov-accent-ghost-fg: var(--ov-color-discovery); +} + +.Root[data-ov-color='secondary'] { + --_ov-accent-bg: var(--ov-color-secondary); + --_ov-accent-fg: var(--ov-color-fg-inverse); + --_ov-accent-border: var(--ov-color-secondary); + --_ov-accent-soft-bg: var(--ov-color-secondary-soft); + --_ov-accent-soft-fg: var(--ov-color-secondary); + --_ov-accent-ghost-fg: var(--ov-color-secondary); +} + .Root[data-ov-variant='solid'] { --_ov-bg: var(--_ov-accent-bg); --_ov-fg: var(--_ov-accent-fg); diff --git a/packages/base-ui/src/components/button/Button.test.tsx b/packages/base-ui/src/components/button/Button.test.tsx index 7a23ff1..9325c1b 100644 --- a/packages/base-ui/src/components/button/Button.test.tsx +++ b/packages/base-ui/src/components/button/Button.test.tsx @@ -36,4 +36,28 @@ describe('Button', () => { expect(button.querySelector('[data-ov-slot="start-decorator"]')).toBeInTheDocument(); expect(button.querySelector('[data-ov-slot="end-decorator"]')).toBeInTheDocument(); }); + + it('renders with xs size', () => { + renderWithTheme(); + const button = screen.getByRole('button', { name: 'Tiny' }); + expect(button).toHaveAttribute('data-ov-size', 'xs'); + }); + + it('renders with xl size', () => { + renderWithTheme(); + const button = screen.getByRole('button', { name: 'Hero' }); + expect(button).toHaveAttribute('data-ov-size', 'xl'); + }); + + it('renders with discovery color', () => { + renderWithTheme(); + const button = screen.getByRole('button', { name: 'New' }); + expect(button).toHaveAttribute('data-ov-color', 'discovery'); + }); + + it('renders with secondary color', () => { + renderWithTheme(); + const button = screen.getByRole('button', { name: 'Meta' }); + expect(button).toHaveAttribute('data-ov-color', 'secondary'); + }); }); diff --git a/packages/base-ui/src/components/icon-button/IconButton.module.css b/packages/base-ui/src/components/icon-button/IconButton.module.css index ce89200..0fca131 100644 --- a/packages/base-ui/src/components/icon-button/IconButton.module.css +++ b/packages/base-ui/src/components/icon-button/IconButton.module.css @@ -4,9 +4,14 @@ inline-size: var(--_ov-control-height); block-size: var(--_ov-control-height); min-inline-size: var(--_ov-control-height); + min-width: var(--_ov-control-height); padding: 0; } +.Root[data-ov-size='xs'] { + --_ov-icon-size: var(--ov-size-icon-button-icon-xs); +} + .Root[data-ov-size='sm'] { --_ov-icon-size: var(--ov-size-icon-button-icon-sm); } @@ -15,29 +20,8 @@ --_ov-icon-size: var(--ov-size-icon-button-icon-lg); } -.Root[data-ov-dense='true'] { - --_ov-icon-pad: 2px; - --_ov-control-height: calc(var(--_ov-icon-size) + (var(--_ov-icon-pad) * 2)); - - inline-size: var(--_ov-control-height); - block-size: var(--_ov-control-height); - min-inline-size: var(--_ov-control-height); - min-block-size: var(--_ov-control-height); - padding: 0; - border-radius: calc(var(--ov-radius-control) - 3px); - line-height: 1; -} - -.Root[data-ov-dense='true'][data-ov-size='sm'] { - --_ov-icon-pad: 2px; -} - -.Root[data-ov-dense='true'][data-ov-size='md'] { - --_ov-icon-pad: 2px; -} - -.Root[data-ov-dense='true'][data-ov-size='lg'] { - --_ov-icon-pad: 3px; +.Root[data-ov-size='xl'] { + --_ov-icon-size: var(--ov-size-icon-button-icon-xl); } .Root :where(svg) { diff --git a/packages/base-ui/src/components/icon-button/IconButton.test.tsx b/packages/base-ui/src/components/icon-button/IconButton.test.tsx index 891c6cb..0ae9a9b 100644 --- a/packages/base-ui/src/components/icon-button/IconButton.test.tsx +++ b/packages/base-ui/src/components/icon-button/IconButton.test.tsx @@ -3,19 +3,39 @@ import { describe, expect, it } from 'vitest'; import { renderWithTheme } from '../../test/render'; import { IconButton } from './IconButton'; +const TestIcon = () => ( + +); + describe('IconButton', () => { - it('renders icon-only button with style attributes', () => { + it('renders with style attributes', () => { renderWithTheme( - - - + , ); - const button = screen.getByRole('button', { name: 'Search' }); expect(button).toHaveAttribute('data-ov-size', 'lg'); expect(button).toHaveAttribute('data-ov-variant', 'outline'); expect(button).toHaveAttribute('data-ov-color', 'brand'); }); + + it('renders with xs size', () => { + renderWithTheme( + , + ); + expect(screen.getByRole('button', { name: 'Tiny' })).toHaveAttribute('data-ov-size', 'xs'); + }); + + it('renders with xl size', () => { + renderWithTheme( + , + ); + expect(screen.getByRole('button', { name: 'Big' })).toHaveAttribute('data-ov-size', 'xl'); + }); + + it('does not accept dense prop', () => { + // @ts-expect-error dense prop was removed + renderWithTheme(); + }); }); diff --git a/packages/base-ui/src/components/icon-button/IconButton.tsx b/packages/base-ui/src/components/icon-button/IconButton.tsx index 499da4d..d7098df 100644 --- a/packages/base-ui/src/components/icon-button/IconButton.tsx +++ b/packages/base-ui/src/components/icon-button/IconButton.tsx @@ -5,18 +5,16 @@ import styles from './IconButton.module.css'; export interface IconButtonProps extends Omit { children: ReactNode; - dense?: boolean; } export const IconButton = forwardRef(function IconButton( - { className, dense = false, ...props }, + { className, ...props }, ref, ) { return ( + + + {/* IconButton */} +
+ + + +
+ + {/* Input */} +
+ + + +
+ + {/* Select */} +
+ + + + + + + + + + + + + Option A + + + Option B + + + + + + +
+ + {/* Chip */} +
+ + Tag + +
+ + {/* Checkbox */} +
+ + Check + +
+ + {/* Radio */} +
+ + Radio + +
+ + {/* Switch */} +
+ +
+ + {/* Badge */} +
+ +
+ +
+
+ ))} + + ); +} + +// ─── Section 2: Color × Variant Matrix ─────────────────────────────────────── + +function ColorVariantMatrix() { + return ( +
+ + + {/* Variant column headers */} +
+ {['', ...VARIANTS].map((label) => ( +
+ {label} +
+ ))} +
+ + {/* Dark background section */} +
+
+ Dark background +
+ {COLORS.map((color) => ( +
+
+ {color} +
+ {VARIANTS.map((variant) => ( +
+ +
+ ))} +
+ ))} +
+ + {/* Light background section */} +
+
+ Light background +
+ {COLORS.map((color) => ( +
+
+ {color} +
+ {VARIANTS.map((variant) => ( +
+ +
+ ))} +
+ ))} +
+
+ ); +} + +// ─── Section 3: IconButton Squareness Check ─────────────────────────────────── + +function IconButtonSquarenessCheck() { + return ( +
+ + +
+ {SIZES.map((size) => ( +
+
+ {/* Visible square background to expose non-square dimensions */} +
+ + + +
+ + {size} + +
+ ))} +
+
+ ); +} + +// ─── Story scaffold ─────────────────────────────────────────────────────────── + +function AuditPage() { + return ( +
+
+

+ Size & Color Audit +

+

+ Visual reference tool — not interactive. Resize the panel to stress-test layouts. +

+
+ + + + +
+ ); +} + +const meta = { + title: 'Consistency/Size & Color Audit', + component: AuditPage, + parameters: { + controls: { hideNoControlsWarning: true }, + docs: { disable: true }, + layout: 'fullscreen', + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Audit: Story = { + parameters: { + controls: { disable: true }, + }, +}; diff --git a/packages/base-ui/src/components/accordion/Accordion.stories.tsx b/packages/base-ui/src/components/accordion/Accordion.stories.tsx index 3b3238e..1a8d911 100644 --- a/packages/base-ui/src/components/accordion/Accordion.stories.tsx +++ b/packages/base-ui/src/components/accordion/Accordion.stories.tsx @@ -16,7 +16,7 @@ const meta = { exclusive: { control: 'boolean' }, defaultExpanded: { control: 'object' }, animation: { control: 'inline-radio', options: ['default', 'fast', 'none'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, }, } satisfies Meta; diff --git a/packages/base-ui/src/components/action-list/ActionList.stories.tsx b/packages/base-ui/src/components/action-list/ActionList.stories.tsx index e216ca2..e6ecdf5 100644 --- a/packages/base-ui/src/components/action-list/ActionList.stories.tsx +++ b/packages/base-ui/src/components/action-list/ActionList.stories.tsx @@ -12,8 +12,8 @@ const meta = { itemVariant: 'ghost', }, argTypes: { - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, itemVariant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, }, parameters: { diff --git a/packages/base-ui/src/components/alert-dialog/AlertDialog.stories.tsx b/packages/base-ui/src/components/alert-dialog/AlertDialog.stories.tsx index 78f10d9..3ebd0f0 100644 --- a/packages/base-ui/src/components/alert-dialog/AlertDialog.stories.tsx +++ b/packages/base-ui/src/components/alert-dialog/AlertDialog.stories.tsx @@ -12,8 +12,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, }, parameters: { controls: { diff --git a/packages/base-ui/src/components/autocomplete/Autocomplete.stories.tsx b/packages/base-ui/src/components/autocomplete/Autocomplete.stories.tsx index 19d11f4..448df2c 100644 --- a/packages/base-ui/src/components/autocomplete/Autocomplete.stories.tsx +++ b/packages/base-ui/src/components/autocomplete/Autocomplete.stories.tsx @@ -79,8 +79,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, }, parameters: { controls: { diff --git a/packages/base-ui/src/components/avatar-group/AvatarGroup.stories.tsx b/packages/base-ui/src/components/avatar-group/AvatarGroup.stories.tsx index 1d0e808..e743088 100644 --- a/packages/base-ui/src/components/avatar-group/AvatarGroup.stories.tsx +++ b/packages/base-ui/src/components/avatar-group/AvatarGroup.stories.tsx @@ -25,10 +25,10 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, shape: { control: 'inline-radio', options: ['circle', 'rounded'] }, - overlap: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + overlap: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, deterministic: { control: 'boolean' }, max: { control: { type: 'number', min: 1, max: 8, step: 1 } }, total: { control: { type: 'number', min: 1, max: 99, step: 1 } }, diff --git a/packages/base-ui/src/components/avatar/Avatar.stories.tsx b/packages/base-ui/src/components/avatar/Avatar.stories.tsx index 98ae388..e14b53f 100644 --- a/packages/base-ui/src/components/avatar/Avatar.stories.tsx +++ b/packages/base-ui/src/components/avatar/Avatar.stories.tsx @@ -56,8 +56,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, shape: { control: 'inline-radio', options: ['circle', 'rounded'] }, deterministic: { control: 'boolean' }, name: { control: 'text' }, diff --git a/packages/base-ui/src/components/badge/Badge.stories.tsx b/packages/base-ui/src/components/badge/Badge.stories.tsx index 41b8a55..52d99d0 100644 --- a/packages/base-ui/src/components/badge/Badge.stories.tsx +++ b/packages/base-ui/src/components/badge/Badge.stories.tsx @@ -21,12 +21,12 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['standard', 'dot'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, position: { control: 'select', options: ['top-right', 'top-left', 'bottom-right', 'bottom-left'], }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, overlap: { control: 'inline-radio', options: ['rectangular', 'circular'] }, max: { control: 'number' }, content: { control: 'text' }, diff --git a/packages/base-ui/src/components/banner/Banner.stories.tsx b/packages/base-ui/src/components/banner/Banner.stories.tsx index 569d487..0b6b95f 100644 --- a/packages/base-ui/src/components/banner/Banner.stories.tsx +++ b/packages/base-ui/src/components/banner/Banner.stories.tsx @@ -31,9 +31,9 @@ const meta = { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, color: { control: 'select', - options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info'], + options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'], }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, }, render: (args) => ( diff --git a/packages/base-ui/src/components/basic-list/BasicList.stories.tsx b/packages/base-ui/src/components/basic-list/BasicList.stories.tsx index 9192f7a..c37e7a4 100644 --- a/packages/base-ui/src/components/basic-list/BasicList.stories.tsx +++ b/packages/base-ui/src/components/basic-list/BasicList.stories.tsx @@ -23,7 +23,7 @@ const meta: Meta = { argTypes: { size: { control: 'inline-radio', - options: ['sm', 'md', 'lg'], + options: ['xs', 'sm', 'md', 'lg', 'xl'], description: 'Controls the overall size of list items (font size, icon size, spacing).', table: { defaultValue: { summary: 'md' } }, }, diff --git a/packages/base-ui/src/components/breadcrumbs/Breadcrumbs.stories.tsx b/packages/base-ui/src/components/breadcrumbs/Breadcrumbs.stories.tsx index 87b6235..5334d50 100644 --- a/packages/base-ui/src/components/breadcrumbs/Breadcrumbs.stories.tsx +++ b/packages/base-ui/src/components/breadcrumbs/Breadcrumbs.stories.tsx @@ -20,7 +20,7 @@ const meta = { maxItems: { control: 'number' }, itemsBeforeCollapse: { control: 'number' }, itemsAfterCollapse: { control: 'number' }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, }, } satisfies Meta; diff --git a/packages/base-ui/src/components/button-group/ButtonGroup.stories.tsx b/packages/base-ui/src/components/button-group/ButtonGroup.stories.tsx index 9a1596f..fed1f44 100644 --- a/packages/base-ui/src/components/button-group/ButtonGroup.stories.tsx +++ b/packages/base-ui/src/components/button-group/ButtonGroup.stories.tsx @@ -14,8 +14,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, orientation: { control: 'inline-radio', options: ['horizontal', 'vertical'] }, attached: { control: 'boolean' }, }, diff --git a/packages/base-ui/src/components/button/Button.stories.tsx b/packages/base-ui/src/components/button/Button.stories.tsx index e26bea7..ecebb5f 100644 --- a/packages/base-ui/src/components/button/Button.stories.tsx +++ b/packages/base-ui/src/components/button/Button.stories.tsx @@ -68,8 +68,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, startIcon: { control: 'select', options: DECORATOR_ICON_OPTIONS }, endIcon: { control: 'select', options: DECORATOR_ICON_OPTIONS }, startDecorator: { control: false, table: { disable: true } }, diff --git a/packages/base-ui/src/components/card/Card.stories.tsx b/packages/base-ui/src/components/card/Card.stories.tsx index c04de77..ac3e4af 100644 --- a/packages/base-ui/src/components/card/Card.stories.tsx +++ b/packages/base-ui/src/components/card/Card.stories.tsx @@ -15,8 +15,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, elevation: { control: 'inline-radio', options: [0, 1, 2, 3] }, surface: { control: 'select', diff --git a/packages/base-ui/src/components/checkbox-group/CheckboxGroup.stories.tsx b/packages/base-ui/src/components/checkbox-group/CheckboxGroup.stories.tsx index 6f5562d..f465cd4 100644 --- a/packages/base-ui/src/components/checkbox-group/CheckboxGroup.stories.tsx +++ b/packages/base-ui/src/components/checkbox-group/CheckboxGroup.stories.tsx @@ -14,8 +14,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, orientation: { control: 'inline-radio', options: ['vertical', 'horizontal'] }, }, render: (args) => ( diff --git a/packages/base-ui/src/components/checkbox/Checkbox.stories.tsx b/packages/base-ui/src/components/checkbox/Checkbox.stories.tsx index 04987bd..0537a74 100644 --- a/packages/base-ui/src/components/checkbox/Checkbox.stories.tsx +++ b/packages/base-ui/src/components/checkbox/Checkbox.stories.tsx @@ -21,8 +21,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, defaultChecked: { control: 'boolean' }, indeterminate: { control: 'boolean' }, labelPosition: { control: 'inline-radio', options: ['start', 'end'] }, diff --git a/packages/base-ui/src/components/chip/Chip.stories.tsx b/packages/base-ui/src/components/chip/Chip.stories.tsx index b5af310..de6eced 100644 --- a/packages/base-ui/src/components/chip/Chip.stories.tsx +++ b/packages/base-ui/src/components/chip/Chip.stories.tsx @@ -55,8 +55,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, mono: { control: 'boolean' }, clickable: { control: 'boolean' }, startIcon: { control: 'select', options: DECORATOR_ICON_OPTIONS }, diff --git a/packages/base-ui/src/components/code-block/CodeBlock.stories.tsx b/packages/base-ui/src/components/code-block/CodeBlock.stories.tsx index 31c812f..e956dc3 100644 --- a/packages/base-ui/src/components/code-block/CodeBlock.stories.tsx +++ b/packages/base-ui/src/components/code-block/CodeBlock.stories.tsx @@ -52,8 +52,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, lineNumbers: { control: 'boolean' }, copyable: { control: 'boolean' }, wrap: { control: 'boolean' }, diff --git a/packages/base-ui/src/components/combobox/Combobox.stories.tsx b/packages/base-ui/src/components/combobox/Combobox.stories.tsx index 2328865..b0ee666 100644 --- a/packages/base-ui/src/components/combobox/Combobox.stories.tsx +++ b/packages/base-ui/src/components/combobox/Combobox.stories.tsx @@ -88,8 +88,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, }, parameters: { controls: { diff --git a/packages/base-ui/src/components/confirm-button/ConfirmButton.stories.tsx b/packages/base-ui/src/components/confirm-button/ConfirmButton.stories.tsx index 44f03b6..9e9dd0a 100644 --- a/packages/base-ui/src/components/confirm-button/ConfirmButton.stories.tsx +++ b/packages/base-ui/src/components/confirm-button/ConfirmButton.stories.tsx @@ -21,11 +21,11 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, confirmColor: { control: 'select', - options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info'], + options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'], }, confirmTimeout: { control: { type: 'number', min: 500, max: 10000, step: 500 } }, onConfirm: { action: 'onConfirm' }, diff --git a/packages/base-ui/src/components/context-menu/ContextMenu.stories.tsx b/packages/base-ui/src/components/context-menu/ContextMenu.stories.tsx index c34fd94..24762ba 100644 --- a/packages/base-ui/src/components/context-menu/ContextMenu.stories.tsx +++ b/packages/base-ui/src/components/context-menu/ContextMenu.stories.tsx @@ -13,8 +13,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, }, render: (args) => ( diff --git a/packages/base-ui/src/components/data-table/DataTable.Selection.stories.tsx b/packages/base-ui/src/components/data-table/DataTable.Selection.stories.tsx index d58cad0..8a7a8a2 100644 --- a/packages/base-ui/src/components/data-table/DataTable.Selection.stories.tsx +++ b/packages/base-ui/src/components/data-table/DataTable.Selection.stories.tsx @@ -72,8 +72,8 @@ const meta: Meta = { tags: ['autodocs'], argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, }, }; diff --git a/packages/base-ui/src/components/data-table/DataTable.stories.tsx b/packages/base-ui/src/components/data-table/DataTable.stories.tsx index a1648cd..f2b6ce1 100644 --- a/packages/base-ui/src/components/data-table/DataTable.stories.tsx +++ b/packages/base-ui/src/components/data-table/DataTable.stories.tsx @@ -56,8 +56,8 @@ const meta: Meta = { tags: ['autodocs'], argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, }, }; diff --git a/packages/base-ui/src/components/description-list/DescriptionList.stories.tsx b/packages/base-ui/src/components/description-list/DescriptionList.stories.tsx index d0d91cc..a033b5f 100644 --- a/packages/base-ui/src/components/description-list/DescriptionList.stories.tsx +++ b/packages/base-ui/src/components/description-list/DescriptionList.stories.tsx @@ -13,7 +13,7 @@ const meta = { }, argTypes: { layout: { control: 'inline-radio', options: ['horizontal', 'vertical', 'grid'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, columns: { control: 'inline-radio', options: [1, 2, 3] }, }, } satisfies Meta; diff --git a/packages/base-ui/src/components/editor-tabs/EditorTabs.stories.tsx b/packages/base-ui/src/components/editor-tabs/EditorTabs.stories.tsx index 5a35290..59ac0f2 100644 --- a/packages/base-ui/src/components/editor-tabs/EditorTabs.stories.tsx +++ b/packages/base-ui/src/components/editor-tabs/EditorTabs.stories.tsx @@ -46,12 +46,12 @@ const meta: Meta = { }, color: { control: 'select', - options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info'], + options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'], description: 'Active indicator color', }, size: { control: 'select', - options: ['sm', 'md', 'lg'], + options: ['xs', 'sm', 'md', 'lg', 'xl'], description: 'Tab size', }, activeId: { control: 'text', description: 'Currently active tab ID (controlled)' }, diff --git a/packages/base-ui/src/components/empty-state/EmptyState.stories.tsx b/packages/base-ui/src/components/empty-state/EmptyState.stories.tsx index 1062cc1..fd321df 100644 --- a/packages/base-ui/src/components/empty-state/EmptyState.stories.tsx +++ b/packages/base-ui/src/components/empty-state/EmptyState.stories.tsx @@ -12,7 +12,7 @@ const meta = { size: 'md', }, argTypes: { - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, title: { control: 'text' }, description: { control: 'text' }, }, diff --git a/packages/base-ui/src/components/filter-bar/FilterBar.stories.tsx b/packages/base-ui/src/components/filter-bar/FilterBar.stories.tsx index 4e520e7..271205c 100644 --- a/packages/base-ui/src/components/filter-bar/FilterBar.stories.tsx +++ b/packages/base-ui/src/components/filter-bar/FilterBar.stories.tsx @@ -10,7 +10,7 @@ const meta = { size: 'md', }, argTypes: { - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, }, } satisfies Meta; diff --git a/packages/base-ui/src/components/form-field/FormField.stories.tsx b/packages/base-ui/src/components/form-field/FormField.stories.tsx index 6764605..4dc14fc 100644 --- a/packages/base-ui/src/components/form-field/FormField.stories.tsx +++ b/packages/base-ui/src/components/form-field/FormField.stories.tsx @@ -25,7 +25,7 @@ const meta = { required: false, }, argTypes: { - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, required: { control: 'boolean' }, description: { control: 'text' }, error: { control: 'text' }, diff --git a/packages/base-ui/src/components/icon-button/IconButton.stories.tsx b/packages/base-ui/src/components/icon-button/IconButton.stories.tsx index 04fd9fd..b463cf4 100644 --- a/packages/base-ui/src/components/icon-button/IconButton.stories.tsx +++ b/packages/base-ui/src/components/icon-button/IconButton.stories.tsx @@ -19,8 +19,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, }, } satisfies Meta; diff --git a/packages/base-ui/src/components/input/Input.stories.tsx b/packages/base-ui/src/components/input/Input.stories.tsx index 712098d..3c97d97 100644 --- a/packages/base-ui/src/components/input/Input.stories.tsx +++ b/packages/base-ui/src/components/input/Input.stories.tsx @@ -21,8 +21,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, mono: { control: 'boolean' }, disabled: { control: 'boolean' }, }, diff --git a/packages/base-ui/src/components/list/List.stories.tsx b/packages/base-ui/src/components/list/List.stories.tsx index 8ca3781..fb135fe 100644 --- a/packages/base-ui/src/components/list/List.stories.tsx +++ b/packages/base-ui/src/components/list/List.stories.tsx @@ -27,7 +27,7 @@ const meta: Meta = { argTypes: { size: { control: 'inline-radio', - options: ['sm', 'md', 'lg'], + options: ['xs', 'sm', 'md', 'lg', 'xl'], description: 'Controls the overall size of list items (font size, icon size, spacing).', table: { defaultValue: { summary: 'md' } }, }, diff --git a/packages/base-ui/src/components/menu/Menu.stories.tsx b/packages/base-ui/src/components/menu/Menu.stories.tsx index 2201806..84a85b8 100644 --- a/packages/base-ui/src/components/menu/Menu.stories.tsx +++ b/packages/base-ui/src/components/menu/Menu.stories.tsx @@ -20,8 +20,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, }, parameters: { docs: { diff --git a/packages/base-ui/src/components/meter/Meter.stories.tsx b/packages/base-ui/src/components/meter/Meter.stories.tsx index b4f9ff8..b24650b 100644 --- a/packages/base-ui/src/components/meter/Meter.stories.tsx +++ b/packages/base-ui/src/components/meter/Meter.stories.tsx @@ -14,8 +14,8 @@ const meta = { }, argTypes: { value: { control: { type: 'range', min: 0, max: 100 } }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, - color: { control: 'select', options: [undefined, 'neutral', 'brand', 'success', 'warning', 'danger', 'info'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, + color: { control: 'select', options: [undefined, 'neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, }, } satisfies Meta; diff --git a/packages/base-ui/src/components/multi-select/MultiSelect.stories.tsx b/packages/base-ui/src/components/multi-select/MultiSelect.stories.tsx index 4d8874e..f27c55c 100644 --- a/packages/base-ui/src/components/multi-select/MultiSelect.stories.tsx +++ b/packages/base-ui/src/components/multi-select/MultiSelect.stories.tsx @@ -45,8 +45,8 @@ type MultiSelectStoryArgs = PrimitiveArgs & Pick; const sharedArgTypes = { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, label: { control: 'text' }, placeholder: { control: 'text' }, searchPlaceholder: { control: 'text' }, diff --git a/packages/base-ui/src/components/nav-list/NavList.stories.tsx b/packages/base-ui/src/components/nav-list/NavList.stories.tsx index 77ae862..3ec197d 100644 --- a/packages/base-ui/src/components/nav-list/NavList.stories.tsx +++ b/packages/base-ui/src/components/nav-list/NavList.stories.tsx @@ -24,7 +24,7 @@ const meta: Meta = { argTypes: { size: { control: 'inline-radio', - options: ['sm', 'md', 'lg'], + options: ['xs', 'sm', 'md', 'lg', 'xl'], description: 'Controls the overall size of list items (font size, icon size, spacing).', table: { defaultValue: { summary: 'md' } }, }, diff --git a/packages/base-ui/src/components/number-input/NumberInput.stories.tsx b/packages/base-ui/src/components/number-input/NumberInput.stories.tsx index 6c6afb3..206d2ef 100644 --- a/packages/base-ui/src/components/number-input/NumberInput.stories.tsx +++ b/packages/base-ui/src/components/number-input/NumberInput.stories.tsx @@ -17,8 +17,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, disabled: { control: 'boolean' }, }, parameters: { diff --git a/packages/base-ui/src/components/pagination/Pagination.stories.tsx b/packages/base-ui/src/components/pagination/Pagination.stories.tsx index 531c056..46692a0 100644 --- a/packages/base-ui/src/components/pagination/Pagination.stories.tsx +++ b/packages/base-ui/src/components/pagination/Pagination.stories.tsx @@ -82,7 +82,7 @@ const meta = { siblingCount: { control: { type: 'number', min: 0, max: 5 } }, boundaryCount: { control: { type: 'number', min: 0, max: 5 } }, showFirstLast: { control: 'boolean' }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, onChange: { action: 'onChange' }, }, } satisfies Meta; diff --git a/packages/base-ui/src/components/popover/Popover.stories.tsx b/packages/base-ui/src/components/popover/Popover.stories.tsx index 40ff761..ba77076 100644 --- a/packages/base-ui/src/components/popover/Popover.stories.tsx +++ b/packages/base-ui/src/components/popover/Popover.stories.tsx @@ -13,8 +13,8 @@ const meta: Meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, }, parameters: { controls: { diff --git a/packages/base-ui/src/components/progress/Progress.stories.tsx b/packages/base-ui/src/components/progress/Progress.stories.tsx index 87106a1..2b94640 100644 --- a/packages/base-ui/src/components/progress/Progress.stories.tsx +++ b/packages/base-ui/src/components/progress/Progress.stories.tsx @@ -16,9 +16,9 @@ const meta = { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, color: { control: 'select', - options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info'], + options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'], }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, }, render: (args) => , } satisfies Meta; diff --git a/packages/base-ui/src/components/radio-group/RadioGroup.stories.tsx b/packages/base-ui/src/components/radio-group/RadioGroup.stories.tsx index a05ee5c..a76f6a4 100644 --- a/packages/base-ui/src/components/radio-group/RadioGroup.stories.tsx +++ b/packages/base-ui/src/components/radio-group/RadioGroup.stories.tsx @@ -14,8 +14,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, orientation: { control: 'inline-radio', options: ['vertical', 'horizontal'] }, }, render: (args) => ( diff --git a/packages/base-ui/src/components/radio/Radio.stories.tsx b/packages/base-ui/src/components/radio/Radio.stories.tsx index d75216e..ed45aa3 100644 --- a/packages/base-ui/src/components/radio/Radio.stories.tsx +++ b/packages/base-ui/src/components/radio/Radio.stories.tsx @@ -18,8 +18,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, disabled: { control: 'boolean' }, }, render: (args) => ( diff --git a/packages/base-ui/src/components/row-list/RowList.stories.tsx b/packages/base-ui/src/components/row-list/RowList.stories.tsx index a196b5d..0bb3476 100644 --- a/packages/base-ui/src/components/row-list/RowList.stories.tsx +++ b/packages/base-ui/src/components/row-list/RowList.stories.tsx @@ -14,7 +14,7 @@ const meta: Meta = { argTypes: { size: { control: 'inline-radio', - options: ['sm', 'md', 'lg'], + options: ['xs', 'sm', 'md', 'lg', 'xl'], description: 'Controls the overall size of list items.', table: { defaultValue: { summary: 'md' } }, }, diff --git a/packages/base-ui/src/components/scroll-area/ScrollArea.stories.tsx b/packages/base-ui/src/components/scroll-area/ScrollArea.stories.tsx index 209d96a..1d52c09 100644 --- a/packages/base-ui/src/components/scroll-area/ScrollArea.stories.tsx +++ b/packages/base-ui/src/components/scroll-area/ScrollArea.stories.tsx @@ -11,7 +11,7 @@ const meta = { }, argTypes: { orientation: { control: 'inline-radio', options: ['vertical', 'horizontal', 'both'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, }, render: (args) => ( ; diff --git a/packages/base-ui/src/components/select/Select.stories.tsx b/packages/base-ui/src/components/select/Select.stories.tsx index 80f6d79..d12f610 100644 --- a/packages/base-ui/src/components/select/Select.stories.tsx +++ b/packages/base-ui/src/components/select/Select.stories.tsx @@ -88,8 +88,8 @@ type SelectStoryArgs = PrimitiveSingleArgs & const sharedArgTypes = { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, selectionIndicator: { control: 'inline-radio', options: ['auto', 'always', 'never'] }, label: { control: 'text' }, placeholder: { control: 'text' }, diff --git a/packages/base-ui/src/components/separator/Separator.stories.tsx b/packages/base-ui/src/components/separator/Separator.stories.tsx index d8d53c0..76f8ceb 100644 --- a/packages/base-ui/src/components/separator/Separator.stories.tsx +++ b/packages/base-ui/src/components/separator/Separator.stories.tsx @@ -19,8 +19,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, orientation: { control: 'inline-radio', options: ['horizontal', 'vertical'] }, inset: { control: 'inline-radio', options: ['none', 'start', 'end', 'middle'] }, labelAlign: { control: 'inline-radio', options: ['start', 'center', 'end'] }, diff --git a/packages/base-ui/src/components/sheet/Sheet.stories.tsx b/packages/base-ui/src/components/sheet/Sheet.stories.tsx index daa0b48..ed87ae9 100644 --- a/packages/base-ui/src/components/sheet/Sheet.stories.tsx +++ b/packages/base-ui/src/components/sheet/Sheet.stories.tsx @@ -17,9 +17,9 @@ const meta = { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, color: { control: 'select', - options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info'], + options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'], }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, elevation: { control: 'inline-radio', options: [0, 1, 2, 3] }, surface: { control: 'select', diff --git a/packages/base-ui/src/components/skeleton/Skeleton.stories.tsx b/packages/base-ui/src/components/skeleton/Skeleton.stories.tsx index d17936a..a72b5d3 100644 --- a/packages/base-ui/src/components/skeleton/Skeleton.stories.tsx +++ b/packages/base-ui/src/components/skeleton/Skeleton.stories.tsx @@ -29,7 +29,7 @@ const meta = { argTypes: { variant: { control: 'inline-radio', options: ['text', 'circular', 'rectangular', 'rounded'] }, animation: { control: 'inline-radio', options: ['pulse', 'wave', 'none'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, width: { control: 'text' }, height: { control: 'text' }, lines: { control: 'number' }, diff --git a/packages/base-ui/src/components/slider/Slider.stories.tsx b/packages/base-ui/src/components/slider/Slider.stories.tsx index 988594d..e34f16e 100644 --- a/packages/base-ui/src/components/slider/Slider.stories.tsx +++ b/packages/base-ui/src/components/slider/Slider.stories.tsx @@ -62,8 +62,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, thumbAlignment: { control: 'inline-radio', options: ['center', 'edge', 'edge-client-only'] }, orientation: { control: 'inline-radio', options: ['horizontal', 'vertical'] }, disabled: { control: 'boolean' }, diff --git a/packages/base-ui/src/components/spinner/Spinner.stories.tsx b/packages/base-ui/src/components/spinner/Spinner.stories.tsx index 7c01035..97e0ecb 100644 --- a/packages/base-ui/src/components/spinner/Spinner.stories.tsx +++ b/packages/base-ui/src/components/spinner/Spinner.stories.tsx @@ -10,10 +10,10 @@ const meta = { color: 'neutral', }, argTypes: { - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, color: { control: 'select', - options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info'], + options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'], }, }, } satisfies Meta; diff --git a/packages/base-ui/src/components/split-button/SplitButton.stories.tsx b/packages/base-ui/src/components/split-button/SplitButton.stories.tsx index 5d95de4..32c81a4 100644 --- a/packages/base-ui/src/components/split-button/SplitButton.stories.tsx +++ b/packages/base-ui/src/components/split-button/SplitButton.stories.tsx @@ -17,8 +17,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, }, } satisfies Meta; diff --git a/packages/base-ui/src/components/stat-row/StatRow.stories.tsx b/packages/base-ui/src/components/stat-row/StatRow.stories.tsx index 9994a4d..238f8ff 100644 --- a/packages/base-ui/src/components/stat-row/StatRow.stories.tsx +++ b/packages/base-ui/src/components/stat-row/StatRow.stories.tsx @@ -21,7 +21,7 @@ const meta = { component: StatRow, tags: ['autodocs'], argTypes: { - size: { control: 'radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, separator: { control: 'text' }, }, } satisfies Meta; diff --git a/packages/base-ui/src/components/status-bar/StatusBar.stories.tsx b/packages/base-ui/src/components/status-bar/StatusBar.stories.tsx index ad90a2a..5099eb6 100644 --- a/packages/base-ui/src/components/status-bar/StatusBar.stories.tsx +++ b/packages/base-ui/src/components/status-bar/StatusBar.stories.tsx @@ -23,7 +23,7 @@ const meta = { size: 'sm', }, argTypes: { - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, }, render: (args) => ( diff --git a/packages/base-ui/src/components/status-dot/StatusDot.stories.tsx b/packages/base-ui/src/components/status-dot/StatusDot.stories.tsx index 44d4ca3..34f7307 100644 --- a/packages/base-ui/src/components/status-dot/StatusDot.stories.tsx +++ b/packages/base-ui/src/components/status-dot/StatusDot.stories.tsx @@ -17,7 +17,7 @@ const meta = { control: 'select', options: ['success', 'warning', 'danger', 'info', 'neutral', 'pending'], }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, pulse: { control: 'boolean' }, pulseIntensity: { control: 'inline-radio', options: ['subtle', 'default', 'strong'] }, label: { control: 'text' }, diff --git a/packages/base-ui/src/components/switch/Switch.stories.tsx b/packages/base-ui/src/components/switch/Switch.stories.tsx index b871bf1..0c6db12 100644 --- a/packages/base-ui/src/components/switch/Switch.stories.tsx +++ b/packages/base-ui/src/components/switch/Switch.stories.tsx @@ -18,8 +18,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, defaultChecked: { control: 'boolean' }, labelPosition: { control: 'inline-radio', options: ['start', 'end'] }, layout: { control: 'inline-radio', options: ['inline', 'spread'] }, diff --git a/packages/base-ui/src/components/table/Table.stories.tsx b/packages/base-ui/src/components/table/Table.stories.tsx index 9a57bd2..7b15660 100644 --- a/packages/base-ui/src/components/table/Table.stories.tsx +++ b/packages/base-ui/src/components/table/Table.stories.tsx @@ -91,8 +91,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, layout: { control: 'inline-radio', options: ['auto', 'fixed'] }, striped: { control: 'boolean' }, hoverable: { control: 'boolean' }, diff --git a/packages/base-ui/src/components/tabs/Tabs.stories.tsx b/packages/base-ui/src/components/tabs/Tabs.stories.tsx index 24b3991..b5487f4 100644 --- a/packages/base-ui/src/components/tabs/Tabs.stories.tsx +++ b/packages/base-ui/src/components/tabs/Tabs.stories.tsx @@ -12,8 +12,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost', 'flat'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, }, render: (args) => ( diff --git a/packages/base-ui/src/components/tag-input/TagInput.stories.tsx b/packages/base-ui/src/components/tag-input/TagInput.stories.tsx index 356b015..a269192 100644 --- a/packages/base-ui/src/components/tag-input/TagInput.stories.tsx +++ b/packages/base-ui/src/components/tag-input/TagInput.stories.tsx @@ -17,7 +17,7 @@ const meta = { allowDuplicates: false, }, argTypes: { - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, disabled: { control: 'boolean' }, allowDuplicates: { control: 'boolean' }, max: { control: 'number' }, diff --git a/packages/base-ui/src/components/text-area/TextArea.stories.tsx b/packages/base-ui/src/components/text-area/TextArea.stories.tsx index c8d6af5..a2602d9 100644 --- a/packages/base-ui/src/components/text-area/TextArea.stories.tsx +++ b/packages/base-ui/src/components/text-area/TextArea.stories.tsx @@ -18,8 +18,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, mono: { control: 'boolean' }, resize: { control: 'inline-radio', options: ['none', 'vertical', 'horizontal', 'both'] }, disabled: { control: 'boolean' }, diff --git a/packages/base-ui/src/components/text-field/TextField.stories.tsx b/packages/base-ui/src/components/text-field/TextField.stories.tsx index 944977a..b5d3525 100644 --- a/packages/base-ui/src/components/text-field/TextField.stories.tsx +++ b/packages/base-ui/src/components/text-field/TextField.stories.tsx @@ -13,8 +13,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, }, render: (args) => (
diff --git a/packages/base-ui/src/components/timeline/Timeline.stories.tsx b/packages/base-ui/src/components/timeline/Timeline.stories.tsx index 1dea245..bcdc7c7 100644 --- a/packages/base-ui/src/components/timeline/Timeline.stories.tsx +++ b/packages/base-ui/src/components/timeline/Timeline.stories.tsx @@ -12,7 +12,7 @@ const meta = { children: null, }, argTypes: { - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, }, } satisfies Meta; diff --git a/packages/base-ui/src/components/toggle-button-group/ToggleButtonGroup.stories.tsx b/packages/base-ui/src/components/toggle-button-group/ToggleButtonGroup.stories.tsx index a2a58f6..75be185 100644 --- a/packages/base-ui/src/components/toggle-button-group/ToggleButtonGroup.stories.tsx +++ b/packages/base-ui/src/components/toggle-button-group/ToggleButtonGroup.stories.tsx @@ -16,8 +16,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, orientation: { control: 'inline-radio', options: ['horizontal', 'vertical'] }, attached: { control: 'boolean' }, multiple: { control: 'boolean' }, diff --git a/packages/base-ui/src/components/toggle-button/ToggleButton.stories.tsx b/packages/base-ui/src/components/toggle-button/ToggleButton.stories.tsx index 385e819..ae10d64 100644 --- a/packages/base-ui/src/components/toggle-button/ToggleButton.stories.tsx +++ b/packages/base-ui/src/components/toggle-button/ToggleButton.stories.tsx @@ -54,8 +54,8 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, defaultPressed: { control: 'boolean' }, startIcon: { control: 'select', options: DECORATOR_ICON_OPTIONS }, endIcon: { control: 'select', options: DECORATOR_ICON_OPTIONS }, diff --git a/packages/base-ui/src/components/toolbar/Toolbar.stories.tsx b/packages/base-ui/src/components/toolbar/Toolbar.stories.tsx index 15c9820..1290aeb 100644 --- a/packages/base-ui/src/components/toolbar/Toolbar.stories.tsx +++ b/packages/base-ui/src/components/toolbar/Toolbar.stories.tsx @@ -31,7 +31,7 @@ const meta = { 'aria-label': 'Toolbar', }, argTypes: { - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, }, render: (args) => ( diff --git a/packages/base-ui/src/components/tooltip/Tooltip.stories.tsx b/packages/base-ui/src/components/tooltip/Tooltip.stories.tsx index 52a2a17..27d2c04 100644 --- a/packages/base-ui/src/components/tooltip/Tooltip.stories.tsx +++ b/packages/base-ui/src/components/tooltip/Tooltip.stories.tsx @@ -12,8 +12,8 @@ const meta: Meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] }, - color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, }, parameters: { controls: { diff --git a/packages/base-ui/src/components/tree-list/TreeList.stories.tsx b/packages/base-ui/src/components/tree-list/TreeList.stories.tsx index 9e82388..96b063c 100644 --- a/packages/base-ui/src/components/tree-list/TreeList.stories.tsx +++ b/packages/base-ui/src/components/tree-list/TreeList.stories.tsx @@ -237,7 +237,7 @@ const meta: Meta = { argTypes: { size: { control: 'inline-radio', - options: ['sm', 'md', 'lg'], + options: ['xs', 'sm', 'md', 'lg', 'xl'], description: 'Controls the overall size of tree items (font size, icon size, spacing).', table: { defaultValue: { summary: 'md' } }, }, diff --git a/packages/base-ui/src/components/typography/Blockquote.stories.tsx b/packages/base-ui/src/components/typography/Blockquote.stories.tsx index 1923ec3..f06860a 100644 --- a/packages/base-ui/src/components/typography/Blockquote.stories.tsx +++ b/packages/base-ui/src/components/typography/Blockquote.stories.tsx @@ -14,7 +14,7 @@ const meta = { }, argTypes: { variant: { control: 'inline-radio', options: ['emphasis', 'plain'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, tone: { control: 'select', options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'], diff --git a/packages/base-ui/src/components/typography/Caption.stories.tsx b/packages/base-ui/src/components/typography/Caption.stories.tsx index 678276f..431195e 100644 --- a/packages/base-ui/src/components/typography/Caption.stories.tsx +++ b/packages/base-ui/src/components/typography/Caption.stories.tsx @@ -14,7 +14,7 @@ const meta = { }, argTypes: { as: { control: 'inline-radio', options: ['span', 'p', 'div'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, tone: { control: 'select', options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'], diff --git a/packages/base-ui/src/components/typography/Code.stories.tsx b/packages/base-ui/src/components/typography/Code.stories.tsx index 6259ca2..7a003ed 100644 --- a/packages/base-ui/src/components/typography/Code.stories.tsx +++ b/packages/base-ui/src/components/typography/Code.stories.tsx @@ -12,7 +12,7 @@ const meta = { children: '/api/v1/models', }, argTypes: { - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, tone: { control: 'select', options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'], diff --git a/packages/base-ui/src/components/typography/Em.stories.tsx b/packages/base-ui/src/components/typography/Em.stories.tsx index 8bcbf7b..6043aa3 100644 --- a/packages/base-ui/src/components/typography/Em.stories.tsx +++ b/packages/base-ui/src/components/typography/Em.stories.tsx @@ -12,7 +12,7 @@ const meta = { children: 'Emphasized guidance text', }, argTypes: { - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, tone: { control: 'select', options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'], diff --git a/packages/base-ui/src/components/typography/Heading.stories.tsx b/packages/base-ui/src/components/typography/Heading.stories.tsx index 3e96989..cde6296 100644 --- a/packages/base-ui/src/components/typography/Heading.stories.tsx +++ b/packages/base-ui/src/components/typography/Heading.stories.tsx @@ -14,7 +14,7 @@ const meta = { }, argTypes: { level: { control: 'inline-radio', options: [1, 2, 3, 4, 5, 6] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, tone: { control: 'select', options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'], diff --git a/packages/base-ui/src/components/typography/Hotkey.stories.tsx b/packages/base-ui/src/components/typography/Hotkey.stories.tsx index 7352bbb..b9dad93 100644 --- a/packages/base-ui/src/components/typography/Hotkey.stories.tsx +++ b/packages/base-ui/src/components/typography/Hotkey.stories.tsx @@ -12,7 +12,7 @@ const meta = { children: 'CMD+K', }, argTypes: { - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, tone: { control: 'select', options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'], diff --git a/packages/base-ui/src/components/typography/Link.stories.tsx b/packages/base-ui/src/components/typography/Link.stories.tsx index 0d0c9c3..67b2ac1 100644 --- a/packages/base-ui/src/components/typography/Link.stories.tsx +++ b/packages/base-ui/src/components/typography/Link.stories.tsx @@ -14,7 +14,7 @@ const meta = { children: 'Open runtime diagnostics and troubleshooting docs', }, argTypes: { - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, tone: { control: 'select', options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'], diff --git a/packages/base-ui/src/components/typography/Overline.stories.tsx b/packages/base-ui/src/components/typography/Overline.stories.tsx index b9d5aab..6542b3e 100644 --- a/packages/base-ui/src/components/typography/Overline.stories.tsx +++ b/packages/base-ui/src/components/typography/Overline.stories.tsx @@ -14,7 +14,7 @@ const meta = { }, argTypes: { as: { control: 'inline-radio', options: ['span', 'p', 'div'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, tone: { control: 'select', options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'], diff --git a/packages/base-ui/src/components/typography/Quote.stories.tsx b/packages/base-ui/src/components/typography/Quote.stories.tsx index 4ff154f..9da2a61 100644 --- a/packages/base-ui/src/components/typography/Quote.stories.tsx +++ b/packages/base-ui/src/components/typography/Quote.stories.tsx @@ -12,7 +12,7 @@ const meta = { children: 'quoted guidance', }, argTypes: { - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, tone: { control: 'select', options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'], diff --git a/packages/base-ui/src/components/typography/Strong.stories.tsx b/packages/base-ui/src/components/typography/Strong.stories.tsx index 8a2ea1c..84d9dbd 100644 --- a/packages/base-ui/src/components/typography/Strong.stories.tsx +++ b/packages/base-ui/src/components/typography/Strong.stories.tsx @@ -12,7 +12,7 @@ const meta = { children: 'Strongly emphasized text', }, argTypes: { - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, tone: { control: 'select', options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'], diff --git a/packages/base-ui/src/components/typography/Text.stories.tsx b/packages/base-ui/src/components/typography/Text.stories.tsx index bcfe486..0bb9d18 100644 --- a/packages/base-ui/src/components/typography/Text.stories.tsx +++ b/packages/base-ui/src/components/typography/Text.stories.tsx @@ -16,7 +16,7 @@ const meta = { }, argTypes: { as: { control: 'inline-radio', options: ['span', 'p', 'div', 'label'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, tone: { control: 'select', options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'], diff --git a/packages/base-ui/src/components/typography/Underline.stories.tsx b/packages/base-ui/src/components/typography/Underline.stories.tsx index 8ff0b61..4d9f649 100644 --- a/packages/base-ui/src/components/typography/Underline.stories.tsx +++ b/packages/base-ui/src/components/typography/Underline.stories.tsx @@ -14,7 +14,7 @@ const meta = { }, argTypes: { as: { control: 'inline-radio', options: ['u', 'span'] }, - size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] }, + size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] }, tone: { control: 'select', options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'], From d49d07e05301e643a6e9f598bab26f3c0b366918 Mon Sep 17 00:00:00 2001 From: Joshua Pare Date: Tue, 17 Mar 2026 18:10:00 -0500 Subject: [PATCH 11/16] fix(base-ui): add missing info color CSS to 30 components The info color existed in the type system but had no CSS rules in most interactive components. Now all components that support colors have complete info/discovery/secondary coverage. --- .../components/alert-dialog/AlertDialog.module.css | 13 +++++++++++++ .../autocomplete/Autocomplete.module.css | 14 ++++++++++++++ .../src/components/avatar/Avatar.module.css | 8 ++++++++ .../base-ui/src/components/badge/Badge.module.css | 5 +++++ .../src/components/button/Button.module.css | 9 +++++++++ .../base-ui/src/components/card/Card.module.css | 6 ++++++ .../src/components/checkbox/Checkbox.module.css | 9 +++++++++ .../base-ui/src/components/chip/Chip.module.css | 9 +++++++++ .../src/components/code-block/CodeBlock.module.css | 4 ++++ .../src/components/combobox/Combobox.module.css | 14 ++++++++++++++ .../components/context-menu/ContextMenu.module.css | 4 ++++ .../src/components/data-table/DataTable.module.css | 5 +++++ .../base-ui/src/components/input/Input.module.css | 6 ++++++ .../base-ui/src/components/list/List.module.css | 4 ++++ .../base-ui/src/components/menu/Menu.module.css | 10 ++++++++++ .../components/multi-select/MultiSelect.module.css | 9 +++++++++ .../components/number-input/NumberInput.module.css | 6 ++++++ .../src/components/popover/Popover.module.css | 8 ++++++++ .../base-ui/src/components/radio/Radio.module.css | 9 +++++++++ .../src/components/select/Select.module.css | 9 +++++++++ .../src/components/separator/Separator.module.css | 8 ++++++++ .../src/components/slider/Slider.module.css | 6 ++++++ .../components/split-button/SplitButton.module.css | 10 ++++++++++ .../src/components/switch/Switch.module.css | 7 +++++++ .../base-ui/src/components/table/Table.module.css | 5 +++++ .../base-ui/src/components/tabs/Tabs.module.css | 5 +++++ .../src/components/text-area/TextArea.module.css | 6 ++++++ .../src/components/text-field/TextField.module.css | 6 ++++++ .../toggle-button/ToggleButton.module.css | 9 +++++++++ .../src/components/tooltip/Tooltip.module.css | 8 ++++++++ 30 files changed, 231 insertions(+) diff --git a/packages/base-ui/src/components/alert-dialog/AlertDialog.module.css b/packages/base-ui/src/components/alert-dialog/AlertDialog.module.css index ba2a278..f6cba52 100644 --- a/packages/base-ui/src/components/alert-dialog/AlertDialog.module.css +++ b/packages/base-ui/src/components/alert-dialog/AlertDialog.module.css @@ -53,6 +53,10 @@ --_ov-accent-soft: var(--ov-color-danger-soft); } +.Popup[data-ov-color='info'] { + --_ov-accent-soft: var(--ov-color-info-soft); +} + .Popup[data-ov-color='discovery'] { --_ov-accent-soft: var(--ov-color-discovery-soft); } @@ -136,6 +140,15 @@ --_ov-bg-pressed: color-mix(in srgb, var(--ov-color-danger) 78%, black 22%); } +.Trigger[data-ov-color='info'], +.Close[data-ov-color='info'] { + --_ov-bg: var(--ov-color-info); + --_ov-border: var(--ov-color-info); + --_ov-fg: var(--ov-color-fg-inverse); + --_ov-bg-hover: color-mix(in srgb, var(--ov-color-info) 88%, white 12%); + --_ov-bg-pressed: color-mix(in srgb, var(--ov-color-info) 78%, black 22%); +} + .Trigger[data-ov-color='discovery'], .Close[data-ov-color='discovery'] { --_ov-bg: var(--ov-color-discovery); diff --git a/packages/base-ui/src/components/autocomplete/Autocomplete.module.css b/packages/base-ui/src/components/autocomplete/Autocomplete.module.css index b24035d..eee9767 100644 --- a/packages/base-ui/src/components/autocomplete/Autocomplete.module.css +++ b/packages/base-ui/src/components/autocomplete/Autocomplete.module.css @@ -77,6 +77,11 @@ --_ov-accent-soft: var(--ov-color-danger-soft); } +.Input[data-ov-color='info'] { + --_ov-focus: var(--ov-color-info); + --_ov-accent-soft: var(--ov-color-info-soft); +} + .Input[data-ov-color='discovery'] { --_ov-focus: var(--ov-color-discovery); --_ov-accent-soft: var(--ov-color-discovery-soft); @@ -193,6 +198,10 @@ --_ov-selected-bg: var(--ov-color-danger-soft); } +.Popup[data-ov-color='info'] { + --_ov-selected-bg: var(--ov-color-info-soft); +} + .Popup[data-ov-color='discovery'] { --_ov-selected-bg: var(--ov-color-discovery-soft); } @@ -345,6 +354,11 @@ --_ov-fg: var(--ov-color-danger); } +.Trigger[data-ov-color='info'], +.Clear[data-ov-color='info'] { + --_ov-fg: var(--ov-color-info); +} + .Trigger[data-ov-color='discovery'], .Clear[data-ov-color='discovery'] { --_ov-fg: var(--ov-color-discovery); diff --git a/packages/base-ui/src/components/avatar/Avatar.module.css b/packages/base-ui/src/components/avatar/Avatar.module.css index c628f60..85f4f68 100644 --- a/packages/base-ui/src/components/avatar/Avatar.module.css +++ b/packages/base-ui/src/components/avatar/Avatar.module.css @@ -91,6 +91,14 @@ --_ov-accent-soft-fg: var(--ov-color-danger); } +.Root[data-ov-color='info'] { + --_ov-accent-bg: var(--ov-color-info); + --_ov-accent-fg: var(--ov-color-fg-inverse); + --_ov-accent-border: var(--ov-color-info); + --_ov-accent-soft-bg: var(--ov-color-info-soft); + --_ov-accent-soft-fg: var(--ov-color-info); +} + .Root[data-ov-color='discovery'] { --_ov-accent-bg: var(--ov-color-discovery); --_ov-accent-fg: var(--ov-color-fg-inverse); diff --git a/packages/base-ui/src/components/badge/Badge.module.css b/packages/base-ui/src/components/badge/Badge.module.css index 06c265f..0468b62 100644 --- a/packages/base-ui/src/components/badge/Badge.module.css +++ b/packages/base-ui/src/components/badge/Badge.module.css @@ -55,6 +55,11 @@ } /* ── Color variants ── */ +.Badge[data-ov-color='info'] { + --_ov-bg: var(--ov-color-info); + --_ov-fg: var(--ov-color-fg-inverse); +} + .Badge[data-ov-color='discovery'] { --_ov-bg: var(--ov-color-discovery); --_ov-fg: var(--ov-color-fg-inverse); diff --git a/packages/base-ui/src/components/button/Button.module.css b/packages/base-ui/src/components/button/Button.module.css index d0afe24..456819f 100644 --- a/packages/base-ui/src/components/button/Button.module.css +++ b/packages/base-ui/src/components/button/Button.module.css @@ -130,6 +130,15 @@ --_ov-accent-ghost-fg: var(--ov-color-danger); } +.Root[data-ov-color='info'] { + --_ov-accent-bg: var(--ov-color-info); + --_ov-accent-fg: var(--ov-color-fg-inverse); + --_ov-accent-border: var(--ov-color-info); + --_ov-accent-soft-bg: var(--ov-color-info-soft); + --_ov-accent-soft-fg: var(--ov-color-info); + --_ov-accent-ghost-fg: var(--ov-color-info); +} + .Root[data-ov-color='discovery'] { --_ov-accent-bg: var(--ov-color-discovery); --_ov-accent-fg: var(--ov-color-fg-inverse); diff --git a/packages/base-ui/src/components/card/Card.module.css b/packages/base-ui/src/components/card/Card.module.css index 4e1998c..c210afa 100644 --- a/packages/base-ui/src/components/card/Card.module.css +++ b/packages/base-ui/src/components/card/Card.module.css @@ -176,6 +176,12 @@ --_ov-accent-fg: var(--ov-color-danger); } +.Root[data-ov-color='info'] { + --_ov-accent: var(--ov-color-info); + --_ov-accent-soft: var(--ov-color-info-soft); + --_ov-accent-fg: var(--ov-color-info); +} + .Root[data-ov-color='discovery'] { --_ov-accent: var(--ov-color-discovery); --_ov-accent-soft: var(--ov-color-discovery-soft); diff --git a/packages/base-ui/src/components/checkbox/Checkbox.module.css b/packages/base-ui/src/components/checkbox/Checkbox.module.css index d8e7024..3d14ab6 100644 --- a/packages/base-ui/src/components/checkbox/Checkbox.module.css +++ b/packages/base-ui/src/components/checkbox/Checkbox.module.css @@ -122,6 +122,15 @@ --_ov-focus-border: var(--ov-color-danger); } +.Root[data-ov-color='info'] { + --_ov-accent-bg: var(--ov-color-info); + --_ov-accent-fg: var(--ov-color-fg-inverse); + --_ov-accent-border: var(--ov-color-info); + --_ov-accent-soft-bg: var(--ov-color-info-soft); + --_ov-accent-soft-fg: var(--ov-color-info); + --_ov-focus-border: var(--ov-color-info); +} + .Root[data-ov-color='discovery'] { --_ov-accent-bg: var(--ov-color-discovery); --_ov-accent-fg: var(--ov-color-fg-inverse); diff --git a/packages/base-ui/src/components/chip/Chip.module.css b/packages/base-ui/src/components/chip/Chip.module.css index 340345d..540ac1b 100644 --- a/packages/base-ui/src/components/chip/Chip.module.css +++ b/packages/base-ui/src/components/chip/Chip.module.css @@ -159,6 +159,15 @@ --_ov-accent-ghost-fg: var(--ov-color-danger); } +.Root[data-ov-color='info'] { + --_ov-accent-bg: var(--ov-color-info); + --_ov-accent-fg: var(--ov-color-fg-inverse); + --_ov-accent-border: var(--ov-color-info); + --_ov-accent-soft-bg: var(--ov-color-info-soft); + --_ov-accent-soft-fg: var(--ov-color-info); + --_ov-accent-ghost-fg: var(--ov-color-info); +} + .Root[data-ov-color='discovery'] { --_ov-accent-bg: var(--ov-color-discovery); --_ov-accent-fg: var(--ov-color-fg-inverse); diff --git a/packages/base-ui/src/components/code-block/CodeBlock.module.css b/packages/base-ui/src/components/code-block/CodeBlock.module.css index 97995f8..035b2a9 100644 --- a/packages/base-ui/src/components/code-block/CodeBlock.module.css +++ b/packages/base-ui/src/components/code-block/CodeBlock.module.css @@ -51,6 +51,10 @@ --_ov-selected-bg: var(--ov-color-danger-soft); } +.Root[data-ov-color='info'] { + --_ov-selected-bg: var(--ov-color-info-soft); +} + .Root[data-ov-color='discovery'] { --_ov-selected-bg: var(--ov-color-discovery-soft); } diff --git a/packages/base-ui/src/components/combobox/Combobox.module.css b/packages/base-ui/src/components/combobox/Combobox.module.css index b7e9190..1c3f370 100644 --- a/packages/base-ui/src/components/combobox/Combobox.module.css +++ b/packages/base-ui/src/components/combobox/Combobox.module.css @@ -77,6 +77,11 @@ --_ov-accent-soft: var(--ov-color-danger-soft); } +.Input[data-ov-color='info'] { + --_ov-focus: var(--ov-color-info); + --_ov-accent-soft: var(--ov-color-info-soft); +} + .Input[data-ov-color='discovery'] { --_ov-focus: var(--ov-color-discovery); --_ov-accent-soft: var(--ov-color-discovery-soft); @@ -199,6 +204,10 @@ --_ov-selected-bg: var(--ov-color-danger-soft); } +.Popup[data-ov-color='info'] { + --_ov-selected-bg: var(--ov-color-info-soft); +} + .Popup[data-ov-color='discovery'] { --_ov-selected-bg: var(--ov-color-discovery-soft); } @@ -376,6 +385,11 @@ --_ov-fg: var(--ov-color-danger); } +.Trigger[data-ov-color='info'], +.Clear[data-ov-color='info'] { + --_ov-fg: var(--ov-color-info); +} + .Trigger[data-ov-color='discovery'], .Clear[data-ov-color='discovery'] { --_ov-fg: var(--ov-color-discovery); diff --git a/packages/base-ui/src/components/context-menu/ContextMenu.module.css b/packages/base-ui/src/components/context-menu/ContextMenu.module.css index 797fe5f..f5d9193 100644 --- a/packages/base-ui/src/components/context-menu/ContextMenu.module.css +++ b/packages/base-ui/src/components/context-menu/ContextMenu.module.css @@ -75,6 +75,10 @@ --_ov-selected-bg: var(--ov-color-danger-soft); } +.Popup[data-ov-color='info'] { + --_ov-selected-bg: var(--ov-color-info-soft); +} + .Popup[data-ov-color='discovery'] { --_ov-selected-bg: var(--ov-color-discovery-soft); } diff --git a/packages/base-ui/src/components/data-table/DataTable.module.css b/packages/base-ui/src/components/data-table/DataTable.module.css index 0b51556..ad6b922 100644 --- a/packages/base-ui/src/components/data-table/DataTable.module.css +++ b/packages/base-ui/src/components/data-table/DataTable.module.css @@ -111,6 +111,11 @@ --_ov-accent-soft: var(--ov-color-danger-soft); } +.Root[data-ov-color='info'] { + --_ov-accent: var(--ov-color-info); + --_ov-accent-soft: var(--ov-color-info-soft); +} + .Root[data-ov-color='discovery'] { --_ov-accent: var(--ov-color-discovery); --_ov-accent-soft: var(--ov-color-discovery-soft); diff --git a/packages/base-ui/src/components/input/Input.module.css b/packages/base-ui/src/components/input/Input.module.css index 55205d2..73005c8 100644 --- a/packages/base-ui/src/components/input/Input.module.css +++ b/packages/base-ui/src/components/input/Input.module.css @@ -77,6 +77,12 @@ --_ov-focus: var(--ov-color-danger); } +:is(.Root, .ControlShell)[data-ov-color='info'] { + --_ov-accent: var(--ov-color-info); + --_ov-accent-soft: var(--ov-color-info-soft); + --_ov-focus: var(--ov-color-info); +} + :is(.Root, .ControlShell)[data-ov-color='discovery'] { --_ov-accent: var(--ov-color-discovery); --_ov-accent-soft: var(--ov-color-discovery-soft); diff --git a/packages/base-ui/src/components/list/List.module.css b/packages/base-ui/src/components/list/List.module.css index 328e5e5..b677c20 100644 --- a/packages/base-ui/src/components/list/List.module.css +++ b/packages/base-ui/src/components/list/List.module.css @@ -78,6 +78,10 @@ --_ov-selected-bg: var(--ov-color-danger-soft); } +.Root[data-ov-color='info'] { + --_ov-selected-bg: var(--ov-color-info-soft); +} + .Root[data-ov-color='discovery'] { --_ov-selected-bg: var(--ov-color-discovery-soft); } diff --git a/packages/base-ui/src/components/menu/Menu.module.css b/packages/base-ui/src/components/menu/Menu.module.css index 8b18fe3..4a75424 100644 --- a/packages/base-ui/src/components/menu/Menu.module.css +++ b/packages/base-ui/src/components/menu/Menu.module.css @@ -74,6 +74,10 @@ --_ov-selected-bg: var(--ov-color-danger-soft); } +.Popup[data-ov-color='info'] { + --_ov-selected-bg: var(--ov-color-info-soft); +} + .Popup[data-ov-color='discovery'] { --_ov-selected-bg: var(--ov-color-discovery-soft); } @@ -240,6 +244,12 @@ --_ov-fg: var(--ov-color-fg-inverse); } +.Trigger[data-ov-color='info'] { + --_ov-bg: var(--ov-color-info); + --_ov-border: var(--ov-color-info); + --_ov-fg: var(--ov-color-fg-inverse); +} + .Trigger[data-ov-color='discovery'] { --_ov-bg: var(--ov-color-discovery); --_ov-border: var(--ov-color-discovery); diff --git a/packages/base-ui/src/components/multi-select/MultiSelect.module.css b/packages/base-ui/src/components/multi-select/MultiSelect.module.css index ec1e2e2..3e4e930 100644 --- a/packages/base-ui/src/components/multi-select/MultiSelect.module.css +++ b/packages/base-ui/src/components/multi-select/MultiSelect.module.css @@ -87,6 +87,11 @@ --_ov-accent-soft: var(--ov-color-danger-soft); } +.Control[data-ov-color='info'] { + --_ov-focus: var(--ov-color-info); + --_ov-accent-soft: var(--ov-color-info-soft); +} + .Control[data-ov-color='discovery'] { --_ov-focus: var(--ov-color-discovery); --_ov-accent-soft: var(--ov-color-discovery-soft); @@ -249,6 +254,10 @@ --_ov-selected-bg: var(--ov-color-danger-soft); } +.Popup[data-ov-color='info'] { + --_ov-selected-bg: var(--ov-color-info-soft); +} + .Popup[data-ov-color='discovery'] { --_ov-selected-bg: var(--ov-color-discovery-soft); } diff --git a/packages/base-ui/src/components/number-input/NumberInput.module.css b/packages/base-ui/src/components/number-input/NumberInput.module.css index 8e64330..19dbc5a 100644 --- a/packages/base-ui/src/components/number-input/NumberInput.module.css +++ b/packages/base-ui/src/components/number-input/NumberInput.module.css @@ -75,6 +75,12 @@ --_ov-focus: var(--ov-color-danger); } +.Root[data-ov-color='info'] { + --_ov-accent: var(--ov-color-info); + --_ov-accent-soft: var(--ov-color-info-soft); + --_ov-focus: var(--ov-color-info); +} + .Root[data-ov-color='discovery'] { --_ov-accent: var(--ov-color-discovery); --_ov-accent-soft: var(--ov-color-discovery-soft); diff --git a/packages/base-ui/src/components/popover/Popover.module.css b/packages/base-ui/src/components/popover/Popover.module.css index 1b85f8b..7230b4d 100644 --- a/packages/base-ui/src/components/popover/Popover.module.css +++ b/packages/base-ui/src/components/popover/Popover.module.css @@ -165,6 +165,10 @@ --_ov-accent-soft: var(--ov-color-danger-soft); } +.Popup[data-ov-color='info'] { + --_ov-accent-soft: var(--ov-color-info-soft); +} + .Popup[data-ov-color='discovery'] { --_ov-accent-soft: var(--ov-color-discovery-soft); } @@ -211,6 +215,10 @@ --_ov-accent-soft: var(--ov-color-danger-soft); } +.Arrow[data-ov-color='info'] { + --_ov-accent-soft: var(--ov-color-info-soft); +} + .Arrow[data-ov-color='discovery'] { --_ov-accent-soft: var(--ov-color-discovery-soft); } diff --git a/packages/base-ui/src/components/radio/Radio.module.css b/packages/base-ui/src/components/radio/Radio.module.css index 636077d..37d627b 100644 --- a/packages/base-ui/src/components/radio/Radio.module.css +++ b/packages/base-ui/src/components/radio/Radio.module.css @@ -94,6 +94,15 @@ --_ov-focus-border: var(--ov-color-danger); } +.Root[data-ov-color='info'] { + --_ov-accent-bg: var(--ov-color-info); + --_ov-accent-fg: var(--ov-color-fg-inverse); + --_ov-accent-border: var(--ov-color-info); + --_ov-accent-soft-bg: var(--ov-color-info-soft); + --_ov-accent-soft-fg: var(--ov-color-info); + --_ov-focus-border: var(--ov-color-info); +} + .Root[data-ov-color='discovery'] { --_ov-accent-bg: var(--ov-color-discovery); --_ov-accent-fg: var(--ov-color-fg-inverse); diff --git a/packages/base-ui/src/components/select/Select.module.css b/packages/base-ui/src/components/select/Select.module.css index fc25208..a5554d2 100644 --- a/packages/base-ui/src/components/select/Select.module.css +++ b/packages/base-ui/src/components/select/Select.module.css @@ -91,6 +91,11 @@ --_ov-accent-soft: var(--ov-color-danger-soft); } +.Trigger[data-ov-color='info'] { + --_ov-focus: var(--ov-color-info); + --_ov-accent-soft: var(--ov-color-info-soft); +} + .Trigger[data-ov-color='discovery'] { --_ov-focus: var(--ov-color-discovery); --_ov-accent-soft: var(--ov-color-discovery-soft); @@ -268,6 +273,10 @@ --_ov-selected-bg: var(--ov-color-danger-soft); } +.Popup[data-ov-color='info'] { + --_ov-selected-bg: var(--ov-color-info-soft); +} + .Popup[data-ov-color='discovery'] { --_ov-selected-bg: var(--ov-color-discovery-soft); } diff --git a/packages/base-ui/src/components/separator/Separator.module.css b/packages/base-ui/src/components/separator/Separator.module.css index bcbae58..2976cbf 100644 --- a/packages/base-ui/src/components/separator/Separator.module.css +++ b/packages/base-ui/src/components/separator/Separator.module.css @@ -70,6 +70,14 @@ ); } +.Root[data-ov-color='info'] { + --_ov-separator-color: color-mix( + in srgb, + var(--ov-color-info) 66%, + var(--ov-color-border-default) 34% + ); +} + .Root[data-ov-color='discovery'] { --_ov-separator-color: color-mix( in srgb, diff --git a/packages/base-ui/src/components/slider/Slider.module.css b/packages/base-ui/src/components/slider/Slider.module.css index 348e5cb..222108a 100644 --- a/packages/base-ui/src/components/slider/Slider.module.css +++ b/packages/base-ui/src/components/slider/Slider.module.css @@ -85,6 +85,12 @@ --_ov-focus-border: var(--ov-color-danger); } +.Root[data-ov-color='info'] { + --_ov-accent: var(--ov-color-info); + --_ov-accent-soft: var(--ov-color-info-soft); + --_ov-focus-border: var(--ov-color-info); +} + .Root[data-ov-color='discovery'] { --_ov-accent: var(--ov-color-discovery); --_ov-accent-soft: var(--ov-color-discovery-soft); diff --git a/packages/base-ui/src/components/split-button/SplitButton.module.css b/packages/base-ui/src/components/split-button/SplitButton.module.css index 8f624b2..994e66b 100644 --- a/packages/base-ui/src/components/split-button/SplitButton.module.css +++ b/packages/base-ui/src/components/split-button/SplitButton.module.css @@ -180,6 +180,16 @@ --_ov-accent-ghost-fg: var(--ov-color-danger); } +.Action[data-ov-color='info'], +.MenuTrigger[data-ov-color='info'] { + --_ov-accent-bg: var(--ov-color-info); + --_ov-accent-fg: var(--ov-color-fg-inverse); + --_ov-accent-border: var(--ov-color-info); + --_ov-accent-soft-bg: var(--ov-color-info-soft); + --_ov-accent-soft-fg: var(--ov-color-info); + --_ov-accent-ghost-fg: var(--ov-color-info); +} + .Action[data-ov-color='discovery'], .MenuTrigger[data-ov-color='discovery'] { --_ov-accent-bg: var(--ov-color-discovery); diff --git a/packages/base-ui/src/components/switch/Switch.module.css b/packages/base-ui/src/components/switch/Switch.module.css index a8bfb7d..222a78b 100644 --- a/packages/base-ui/src/components/switch/Switch.module.css +++ b/packages/base-ui/src/components/switch/Switch.module.css @@ -95,6 +95,13 @@ --_ov-focus-border: var(--ov-color-danger); } +.Root[data-ov-color='info'] { + --_ov-accent-bg: var(--ov-color-info); + --_ov-accent-border: var(--ov-color-info); + --_ov-accent-soft-bg: var(--ov-color-info-soft); + --_ov-focus-border: var(--ov-color-info); +} + .Root[data-ov-color='discovery'] { --_ov-accent-bg: var(--ov-color-discovery); --_ov-accent-border: var(--ov-color-discovery); diff --git a/packages/base-ui/src/components/table/Table.module.css b/packages/base-ui/src/components/table/Table.module.css index ca63bd5..c3094b9 100644 --- a/packages/base-ui/src/components/table/Table.module.css +++ b/packages/base-ui/src/components/table/Table.module.css @@ -96,6 +96,11 @@ --_ov-accent-soft: var(--ov-color-danger-soft); } +.Root[data-ov-color='info'] { + --_ov-accent: var(--ov-color-info); + --_ov-accent-soft: var(--ov-color-info-soft); +} + .Root[data-ov-color='discovery'] { --_ov-accent: var(--ov-color-discovery); --_ov-accent-soft: var(--ov-color-discovery-soft); diff --git a/packages/base-ui/src/components/tabs/Tabs.module.css b/packages/base-ui/src/components/tabs/Tabs.module.css index e2a9ffc..9d63fab 100644 --- a/packages/base-ui/src/components/tabs/Tabs.module.css +++ b/packages/base-ui/src/components/tabs/Tabs.module.css @@ -58,6 +58,11 @@ --_ov-tab-bg-active: var(--ov-color-danger-soft); } +.Root[data-ov-color='info'] { + --_ov-indicator: var(--ov-color-info); + --_ov-tab-bg-active: var(--ov-color-info-soft); +} + .Root[data-ov-color='discovery'] { --_ov-indicator: var(--ov-color-discovery); --_ov-tab-bg-active: var(--ov-color-discovery-soft); diff --git a/packages/base-ui/src/components/text-area/TextArea.module.css b/packages/base-ui/src/components/text-area/TextArea.module.css index c395355..eb892e1 100644 --- a/packages/base-ui/src/components/text-area/TextArea.module.css +++ b/packages/base-ui/src/components/text-area/TextArea.module.css @@ -73,6 +73,12 @@ --_ov-focus: var(--ov-color-danger); } +.Root[data-ov-color='info'] { + --_ov-accent: var(--ov-color-info); + --_ov-accent-soft: var(--ov-color-info-soft); + --_ov-focus: var(--ov-color-info); +} + .Root[data-ov-color='discovery'] { --_ov-accent: var(--ov-color-discovery); --_ov-accent-soft: var(--ov-color-discovery-soft); diff --git a/packages/base-ui/src/components/text-field/TextField.module.css b/packages/base-ui/src/components/text-field/TextField.module.css index 7ce6c8f..b7efe84 100644 --- a/packages/base-ui/src/components/text-field/TextField.module.css +++ b/packages/base-ui/src/components/text-field/TextField.module.css @@ -66,6 +66,12 @@ --_ov-focus: var(--ov-color-danger); } +.Root[data-ov-color='info'] { + --_ov-accent: var(--ov-color-info); + --_ov-accent-soft: var(--ov-color-info-soft); + --_ov-focus: var(--ov-color-info); +} + .Root[data-ov-color='discovery'] { --_ov-accent: var(--ov-color-discovery); --_ov-accent-soft: var(--ov-color-discovery-soft); diff --git a/packages/base-ui/src/components/toggle-button/ToggleButton.module.css b/packages/base-ui/src/components/toggle-button/ToggleButton.module.css index a76b40a..fdb26e6 100644 --- a/packages/base-ui/src/components/toggle-button/ToggleButton.module.css +++ b/packages/base-ui/src/components/toggle-button/ToggleButton.module.css @@ -1,5 +1,14 @@ /* ─── Color accent vars (mirrors Button.module.css for new colors) ─── */ +.Root[data-ov-color='info'] { + --_ov-accent-bg: var(--ov-color-info); + --_ov-accent-fg: var(--ov-color-fg-inverse); + --_ov-accent-border: var(--ov-color-info); + --_ov-accent-soft-bg: var(--ov-color-info-soft); + --_ov-accent-soft-fg: var(--ov-color-info); + --_ov-accent-ghost-fg: var(--ov-color-info); +} + .Root[data-ov-color='discovery'] { --_ov-accent-bg: var(--ov-color-discovery); --_ov-accent-fg: var(--ov-color-fg-inverse); diff --git a/packages/base-ui/src/components/tooltip/Tooltip.module.css b/packages/base-ui/src/components/tooltip/Tooltip.module.css index 9acf063..772bb28 100644 --- a/packages/base-ui/src/components/tooltip/Tooltip.module.css +++ b/packages/base-ui/src/components/tooltip/Tooltip.module.css @@ -152,6 +152,10 @@ --_ov-accent-soft: var(--ov-color-state-selected); } +.Popup[data-ov-color='info'] { + --_ov-accent-soft: var(--ov-color-info-soft); +} + .Popup[data-ov-color='discovery'] { --_ov-accent-soft: var(--ov-color-discovery-soft); } @@ -202,6 +206,10 @@ --_ov-accent-soft: var(--ov-color-state-selected); } +.Arrow[data-ov-color='info'] { + --_ov-accent-soft: var(--ov-color-info-soft); +} + .Arrow[data-ov-color='discovery'] { --_ov-accent-soft: var(--ov-color-discovery-soft); } From 79f6984cbcf269b10c82fba9c4fe1d35d82faa2d Mon Sep 17 00:00:00 2001 From: Joshua Pare Date: Tue, 17 Mar 2026 18:12:27 -0500 Subject: [PATCH 12/16] fix(base-ui): consistency story fixes + add missing themes to Storybook - Fix SIZE_HEIGHTS labels (md=26, lg=32, xl=40) - Render Checkbox/Radio as control-only (no label) for fair height comparison - Add obsidian, carbon, void themes to Storybook toolbar switcher --- packages/base-ui/.storybook/preview.tsx | 2 +- .../_consistency/ConsistencyCheck.stories.tsx | 22 +++++++++---------- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/packages/base-ui/.storybook/preview.tsx b/packages/base-ui/.storybook/preview.tsx index 6384aa3..34b6b3a 100644 --- a/packages/base-ui/.storybook/preview.tsx +++ b/packages/base-ui/.storybook/preview.tsx @@ -9,7 +9,7 @@ const preview: Preview = { defaultValue: 'dark', toolbar: { icon: 'paintbrush', - items: ['dark', 'light', 'high-contrast-dark', 'high-contrast-light'], + items: ['dark', 'light', 'high-contrast-dark', 'high-contrast-light', 'obsidian', 'carbon', 'void'], }, }, density: { diff --git a/packages/base-ui/src/components/_consistency/ConsistencyCheck.stories.tsx b/packages/base-ui/src/components/_consistency/ConsistencyCheck.stories.tsx index 12dc97f..c4d3a0d 100644 --- a/packages/base-ui/src/components/_consistency/ConsistencyCheck.stories.tsx +++ b/packages/base-ui/src/components/_consistency/ConsistencyCheck.stories.tsx @@ -29,9 +29,9 @@ const SIZES: ComponentSize[] = ['xs', 'sm', 'md', 'lg', 'xl']; const SIZE_HEIGHTS: Record = { xs: '18px', sm: '22px', - md: '28px', - lg: '34px', - xl: '42px', + md: '26px', + lg: '32px', + xl: '40px', }; const COLORS: ComponentColor[] = [ @@ -101,7 +101,7 @@ function SizeConsistencyGrid() { paddingLeft: 4, }} > - {['', 'Button', 'IconButton', 'Input', 'Select', 'Chip', 'Checkbox', 'Radio', 'Switch', 'Badge'].map( + {['', 'Button', 'IconButton', 'Input', 'Select', 'Chip', 'Checkbox\n(control)', 'Radio\n(control)', 'Switch', 'Badge'].map( (label) => (
- {/* Checkbox */} -
- - Check - + {/* Checkbox (control only — no label, to measure control height) */} +
+
- {/* Radio */} -
+ {/* Radio (control only — no label) */} +
- Radio +
From 00221979f44a3a39cc102b344e9376c2b29f5a78 Mon Sep 17 00:00:00 2001 From: Joshua Pare Date: Tue, 17 Mar 2026 18:30:27 -0500 Subject: [PATCH 13/16] fix(base-ui): add gap and icon sizing to Tab triggers Tab triggers with icon + text children had no gap between them. Adds gap: var(--ov-space-stack-xs) and sizes SVG icons to 1em. --- packages/base-ui/src/components/tabs/Tabs.module.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/base-ui/src/components/tabs/Tabs.module.css b/packages/base-ui/src/components/tabs/Tabs.module.css index 9d63fab..1a226b4 100644 --- a/packages/base-ui/src/components/tabs/Tabs.module.css +++ b/packages/base-ui/src/components/tabs/Tabs.module.css @@ -151,6 +151,7 @@ display: inline-flex; align-items: center; justify-content: center; + gap: var(--ov-space-stack-xs); height: calc(var(--_ov-tab-height) - 4px); padding: 0 calc(var(--ov-space-inline-control) + var(--ov-space-stack-sm)); border: 0; @@ -168,6 +169,12 @@ color var(--ov-duration-interactive) var(--ov-ease-standard); } +.Tab :where(svg) { + width: 1em; + height: 1em; + flex-shrink: 0; +} + .Tab:hover { background: var(--_ov-tab-bg-hover); } From b3f98e4a4af5fc66d023201d6b23a9979fbc6238 Mon Sep 17 00:00:00 2001 From: Joshua Pare Date: Tue, 17 Mar 2026 18:34:16 -0500 Subject: [PATCH 14/16] feat(base-ui): Tabs add startDecorator, fix icon sizing and color - Add startDecorator prop to Tabs.Tab (matching Button pattern) - Use --_ov-tab-icon-size variable for decorator sizing per size tier - Fix inactive tab color: use fg-subtle instead of fg-muted - Remove SVG-specific fallback rules in favor of decorator wrapper - Update showcase to use startDecorator API - Remove stale dense props from showcase IconButtons --- .../components/ContainerDetail.tsx | 16 ++++++---------- .../base-ui/src/components/tabs/Tabs.module.css | 17 +++++++++-------- packages/base-ui/src/components/tabs/Tabs.tsx | 7 +++++-- 3 files changed, 20 insertions(+), 20 deletions(-) diff --git a/apps/showcase/src/demos/container-management/components/ContainerDetail.tsx b/apps/showcase/src/demos/container-management/components/ContainerDetail.tsx index 1169222..a98043b 100644 --- a/apps/showcase/src/demos/container-management/components/ContainerDetail.tsx +++ b/apps/showcase/src/demos/container-management/components/ContainerDetail.tsx @@ -44,7 +44,7 @@ export function ContainerDetail({ container, onBack }: ContainerDetailProps) { @@ -101,7 +101,7 @@ export function ContainerDetail({ container, onBack }: ContainerDetailProps) { toast(`Deleting ${container.name}`, { severity: 'warning' })} @@ -114,20 +114,16 @@ export function ContainerDetail({ container, onBack }: ContainerDetailProps) { {/* Tabs */} - - + }> Logs - - + }> Inspect - - + }> Stats - - + }> Files diff --git a/packages/base-ui/src/components/tabs/Tabs.module.css b/packages/base-ui/src/components/tabs/Tabs.module.css index 1a226b4..cc79cee 100644 --- a/packages/base-ui/src/components/tabs/Tabs.module.css +++ b/packages/base-ui/src/components/tabs/Tabs.module.css @@ -1,9 +1,10 @@ .Root { --_ov-tab-height: var(--ov-control-height-md); --_ov-tab-font-size: var(--ov-font-size-body); + --_ov-tab-icon-size: var(--ov-size-icon-button-icon-md); --_ov-list-bg: var(--ov-color-bg-surface-raised); --_ov-list-border: var(--ov-color-border-default); - --_ov-tab-fg: var(--ov-color-fg-muted); + --_ov-tab-fg: var(--ov-color-fg-subtle); --_ov-tab-fg-active: var(--ov-color-fg-default); --_ov-tab-bg-hover: var(--ov-color-state-hover); --_ov-tab-bg-active: var(--ov-color-state-selected); @@ -18,19 +19,23 @@ .Root[data-ov-size='xs'] { --_ov-tab-height: var(--ov-control-height-xs); --_ov-tab-font-size: var(--ov-font-size-caption); + --_ov-tab-icon-size: var(--ov-size-icon-button-icon-xs); } .Root[data-ov-size='sm'] { --_ov-tab-height: var(--ov-control-height-sm); --_ov-tab-font-size: var(--ov-font-size-caption); + --_ov-tab-icon-size: var(--ov-size-icon-button-icon-sm); } .Root[data-ov-size='lg'] { --_ov-tab-height: var(--ov-control-height-lg); + --_ov-tab-icon-size: var(--ov-size-icon-button-icon-lg); } .Root[data-ov-size='xl'] { --_ov-tab-height: var(--ov-control-height-xl); + --_ov-tab-icon-size: var(--ov-size-icon-button-icon-xl); } .Root[data-ov-color='neutral'] { @@ -169,12 +174,6 @@ color var(--ov-duration-interactive) var(--ov-ease-standard); } -.Tab :where(svg) { - width: 1em; - height: 1em; - flex-shrink: 0; -} - .Tab:hover { background: var(--_ov-tab-bg-hover); } @@ -191,7 +190,9 @@ .TabDecorator { display: inline-flex; align-items: center; - margin-left: var(--ov-space-stack-xs, 4px); + justify-content: center; + width: var(--_ov-tab-icon-size, 16px); + height: var(--_ov-tab-icon-size, 16px); flex-shrink: 0; } diff --git a/packages/base-ui/src/components/tabs/Tabs.tsx b/packages/base-ui/src/components/tabs/Tabs.tsx index a9e4964..259a704 100644 --- a/packages/base-ui/src/components/tabs/Tabs.tsx +++ b/packages/base-ui/src/components/tabs/Tabs.tsx @@ -12,7 +12,9 @@ export interface TabsRootProps extends BaseTabs.Root.Props, Omit(function TabsList( }); const TabsTab = forwardRef(function TabsTab( - { className, endDecorator, children, ...props }, + { className, startDecorator, endDecorator, children, ...props }, ref, ) { return ( @@ -55,6 +57,7 @@ const TabsTab = forwardRef(function TabsTab( className={withBaseClassName(styles.Tab, className)} {...props} > + {startDecorator != null && {startDecorator}} {children} {endDecorator != null && {endDecorator}} From 7a94bf04c2a3f6795f93d634438bc8b9f6ecbdfd Mon Sep 17 00:00:00 2001 From: Joshua Pare Date: Tue, 17 Mar 2026 19:04:32 -0500 Subject: [PATCH 15/16] fix(base-ui): Tabs active state, EditorTabs contrast, Toolbar tokens - Fix Tabs: use data-active (not data-selected) for Base UI compat - Flat variant active tab: raised bg + colored inset top shadow - EditorTabs active tab: use bg-surface-raised for better contrast - Toolbar: use control-height tokens instead of hardcoded rem - Toolbar Group: use --ov-space-stack-xs token - Showcase browser: use Toolbar component with proper Groups --- .../web-browser/components/BrowserToolbar.tsx | 63 +++++++++---------- .../src/demos/web-browser/index.module.css | 3 - .../editor-tabs/EditorTabs.module.css | 2 +- .../src/components/tabs/Tabs.module.css | 19 ++++-- .../src/components/toolbar/Toolbar.module.css | 20 +++--- 5 files changed, 54 insertions(+), 53 deletions(-) diff --git a/apps/showcase/src/demos/web-browser/components/BrowserToolbar.tsx b/apps/showcase/src/demos/web-browser/components/BrowserToolbar.tsx index b9caa68..e190fad 100644 --- a/apps/showcase/src/demos/web-browser/components/BrowserToolbar.tsx +++ b/apps/showcase/src/demos/web-browser/components/BrowserToolbar.tsx @@ -5,7 +5,7 @@ import { LuRotateCw, LuLock, } from 'react-icons/lu'; -import { IconButton, Input } from '@omniview/base-ui'; +import { IconButton, Input, Toolbar } from '@omniview/base-ui'; import { ensureProtocol, NEW_TAB_URL } from '../data'; import styles from '../index.module.css'; @@ -47,36 +47,35 @@ export function BrowserToolbar({ ); return ( -
- - - - - - - - - + + + + + + + + + + + + } @@ -87,6 +86,6 @@ export function BrowserToolbar({ placeholder="Enter a URL…" /> -
+ ); } diff --git a/apps/showcase/src/demos/web-browser/index.module.css b/apps/showcase/src/demos/web-browser/index.module.css index b14ac87..145a3bd 100644 --- a/apps/showcase/src/demos/web-browser/index.module.css +++ b/apps/showcase/src/demos/web-browser/index.module.css @@ -31,9 +31,6 @@ /* Toolbar: nav buttons + address bar */ .toolbar { - display: flex; - align-items: center; - gap: 2px; padding: 4px 8px; background: var(--ov-color-bg-surface); } diff --git a/packages/base-ui/src/components/editor-tabs/EditorTabs.module.css b/packages/base-ui/src/components/editor-tabs/EditorTabs.module.css index 664a83c..4677bd1 100644 --- a/packages/base-ui/src/components/editor-tabs/EditorTabs.module.css +++ b/packages/base-ui/src/components/editor-tabs/EditorTabs.module.css @@ -250,7 +250,7 @@ } .Tab[data-active] { - background: var(--_ov-tab-active-bg); + background: var(--ov-color-bg-surface-raised); color: var(--_ov-tab-active-fg); border-bottom-color: var(--_ov-tab-active-border); } diff --git a/packages/base-ui/src/components/tabs/Tabs.module.css b/packages/base-ui/src/components/tabs/Tabs.module.css index cc79cee..ddc884d 100644 --- a/packages/base-ui/src/components/tabs/Tabs.module.css +++ b/packages/base-ui/src/components/tabs/Tabs.module.css @@ -4,8 +4,9 @@ --_ov-tab-icon-size: var(--ov-size-icon-button-icon-md); --_ov-list-bg: var(--ov-color-bg-surface-raised); --_ov-list-border: var(--ov-color-border-default); - --_ov-tab-fg: var(--ov-color-fg-subtle); + --_ov-tab-fg: var(--ov-color-fg-muted); --_ov-tab-fg-active: var(--ov-color-fg-default); + --_ov-tab-fg-hover: var(--ov-color-fg-default); --_ov-tab-bg-hover: var(--ov-color-state-hover); --_ov-tab-bg-active: var(--ov-color-state-selected); --_ov-indicator: var(--ov-color-brand-400); @@ -126,13 +127,18 @@ height: var(--_ov-tab-height); } -.Root[data-ov-variant='flat'] .Tab[data-selected] { - background: transparent; +.Root[data-ov-variant='flat'] .Tab[data-active] { + background: var(--ov-color-bg-surface-raised); color: var(--_ov-tab-fg-active); + border-radius: var(--ov-primitive-radius-sm) var(--ov-primitive-radius-sm) 0 0; + box-shadow: inset 0 2px 0 var(--_ov-indicator); } .Root[data-ov-variant='flat'] .Indicator { - border-radius: 0; + border-radius: var(--ov-primitive-radius-sm) var(--ov-primitive-radius-sm) 0 0; + height: 2px; + top: 0; + bottom: auto; } .Root[data-ov-variant='flat'] .Panel { @@ -158,7 +164,7 @@ justify-content: center; gap: var(--ov-space-stack-xs); height: calc(var(--_ov-tab-height) - 4px); - padding: 0 calc(var(--ov-space-inline-control) + var(--ov-space-stack-sm)); + padding: 0 var(--ov-space-inline-control); border: 0; border-radius: calc(var(--ov-radius-control) - 2px); background: transparent; @@ -176,9 +182,10 @@ .Tab:hover { background: var(--_ov-tab-bg-hover); + color: var(--_ov-tab-fg-hover); } -.Tab[data-selected] { +.Tab[data-active] { color: var(--_ov-tab-fg-active); background: var(--_ov-tab-bg-active); } diff --git a/packages/base-ui/src/components/toolbar/Toolbar.module.css b/packages/base-ui/src/components/toolbar/Toolbar.module.css index 3f26931..b8a0c32 100644 --- a/packages/base-ui/src/components/toolbar/Toolbar.module.css +++ b/packages/base-ui/src/components/toolbar/Toolbar.module.css @@ -4,38 +4,36 @@ align-items: center; gap: var(--ov-space-stack-sm); background: transparent; - min-height: var(--_ov-toolbar-height, 2.25rem); + min-height: var(--_ov-toolbar-height, var(--ov-control-height-md)); } .Root[data-ov-size='xs'] { - --_ov-toolbar-height: 1.5rem; - - font-size: var(--ov-font-size-caption); + --_ov-toolbar-height: var(--ov-control-height-xs); + font-size: var(--ov-size-button-font-size-xs); } .Root[data-ov-size='sm'] { - --_ov-toolbar-height: 1.75rem; - - font-size: var(--ov-font-size-caption); + --_ov-toolbar-height: var(--ov-control-height-sm); + font-size: var(--ov-size-button-font-size-sm); } .Root[data-ov-size='md'] { - --_ov-toolbar-height: 2.25rem; + --_ov-toolbar-height: var(--ov-control-height-md); } .Root[data-ov-size='lg'] { - --_ov-toolbar-height: 2.75rem; + --_ov-toolbar-height: var(--ov-control-height-lg); } .Root[data-ov-size='xl'] { - --_ov-toolbar-height: 3.25rem; + --_ov-toolbar-height: var(--ov-control-height-xl); } .Group { display: flex; flex-direction: row; align-items: center; - gap: var(--_ov-toolbar-group-gap, 4px); /* --ov-space-stack-xs; no semantic token for 4px spacing */ + gap: var(--_ov-toolbar-group-gap, var(--ov-space-stack-xs)); } .Separator { From e94cb4d18f268661ef9c20ba64aaa2283c11693c Mon Sep 17 00:00:00 2001 From: Joshua Pare Date: Tue, 17 Mar 2026 19:07:03 -0500 Subject: [PATCH 16/16] fix(base-ui): Tooltip.Trigger should be a pass-through, not a styled button MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Trigger had full button styling (height, padding, background, border) which caused any element wrapped in a Tooltip to render with extra sizing. Now it's just display: inline-flex — visual styling comes from the child element (IconButton, Button, etc.). --- .../src/components/tooltip/Tooltip.module.css | 79 +------------------ 1 file changed, 3 insertions(+), 76 deletions(-) diff --git a/packages/base-ui/src/components/tooltip/Tooltip.module.css b/packages/base-ui/src/components/tooltip/Tooltip.module.css index 772bb28..ab6609b 100644 --- a/packages/base-ui/src/components/tooltip/Tooltip.module.css +++ b/packages/base-ui/src/components/tooltip/Tooltip.module.css @@ -6,84 +6,11 @@ z-index: var(--ov-z-tooltip, 140); } +/* Trigger is a pass-through — no visual styling. + The trigger's appearance comes from whatever element is inside it + (e.g., IconButton, Button, Chip). The Tooltip only adds behavior. */ .Trigger { - --_ov-height: var(--ov-size-button-height-md); - --_ov-padding-inline: var(--ov-size-button-padding-inline-md); - --_ov-bg: var(--ov-color-bg-surface-raised); - --_ov-border: var(--ov-color-border-default); - --_ov-fg: var(--ov-color-fg-default); - --_ov-bg-hover: var(--ov-color-state-hover); - --_ov-bg-pressed: var(--ov-color-state-pressed); - display: inline-flex; - align-items: center; - justify-content: center; - min-height: var(--_ov-height); - padding: 0 var(--_ov-padding-inline); - border-radius: var(--ov-radius-control); - border: 1px solid var(--_ov-border); - background: var(--_ov-bg); - color: var(--_ov-fg); - font-family: var(--ov-font-sans); - font-size: var(--ov-font-size-body); - font-weight: var(--ov-font-weight-label); - line-height: 1; - cursor: pointer; - transition: - background-color var(--ov-duration-interactive) var(--ov-ease-standard), - border-color var(--ov-duration-interactive) var(--ov-ease-standard), - color var(--ov-duration-interactive) var(--ov-ease-standard); -} - -.Trigger[data-ov-size='sm'] { - --_ov-height: var(--ov-size-button-height-sm); - --_ov-padding-inline: var(--ov-size-button-padding-inline-sm); - font-size: var(--ov-font-size-caption); -} - -.Trigger[data-ov-size='lg'] { - --_ov-height: var(--ov-size-button-height-lg); - --_ov-padding-inline: var(--ov-size-button-padding-inline-lg); -} - -.Trigger[data-ov-color='brand'] { - --_ov-bg: var(--ov-color-brand-500); - --_ov-border: var(--ov-color-brand-400); - --_ov-fg: var(--ov-color-fg-inverse); -} - -.Trigger[data-ov-color='danger'] { - --_ov-bg: var(--ov-color-danger); - --_ov-border: var(--ov-color-danger); - --_ov-fg: var(--ov-color-fg-inverse); -} - -.Trigger[data-ov-variant='soft'] { - --_ov-bg: var(--ov-color-state-selected); - --_ov-border: transparent; -} - -.Trigger[data-ov-variant='outline'] { - --_ov-bg: transparent; -} - -.Trigger[data-ov-variant='ghost'] { - --_ov-bg: transparent; - --_ov-border: transparent; -} - -.Trigger:hover { - background: var(--_ov-bg-hover); -} - -.Trigger:active { - background: var(--_ov-bg-pressed); -} - -.Trigger:focus-visible { - outline: none; - border-color: var(--ov-color-border-focus); - box-shadow: 0 0 0 1px var(--ov-color-state-focus-ring); } .Popup {