diff --git a/packages/raystack/components/accordion/accordion.module.css b/packages/raystack/components/accordion/accordion.module.css index 4e1e0ae49..963d31bae 100644 --- a/packages/raystack/components/accordion/accordion.module.css +++ b/packages/raystack/components/accordion/accordion.module.css @@ -90,7 +90,7 @@ @media (prefers-reduced-motion: no-preference) { .accordion-icon { - transition: transform var(--rs-duration-fast) var(--rs-ease-in-out); + transition: transform var(--rs-duration-fast) var(--rs-ease-out); } .accordion-content { diff --git a/packages/raystack/components/callout/callout.module.css b/packages/raystack/components/callout/callout.module.css index ca3108017..552ff1949 100644 --- a/packages/raystack/components/callout/callout.module.css +++ b/packages/raystack/components/callout/callout.module.css @@ -46,6 +46,7 @@ flex-shrink: 1; min-width: 0; overflow-wrap: break-word; + text-wrap: pretty; } .actionsContainer { diff --git a/packages/raystack/components/chat/chat.module.css b/packages/raystack/components/chat/chat.module.css index 0a2171da3..ba65841bf 100644 --- a/packages/raystack/components/chat/chat.module.css +++ b/packages/raystack/components/chat/chat.module.css @@ -49,6 +49,7 @@ .item { flex-shrink: 0; min-width: 0; + text-wrap: pretty; content-visibility: auto; contain-intrinsic-size: auto 10rem; } @@ -185,7 +186,7 @@ flex-shrink: 0; width: var(--rs-space-9); height: var(--rs-space-9); - border-radius: var(--rs-radius-2); + border-radius: var(--rs-radius-1); background: var(--rs-color-background-neutral-secondary); color: var(--rs-color-foreground-base-secondary); overflow: hidden; diff --git a/packages/raystack/components/chip/chip.module.css b/packages/raystack/components/chip/chip.module.css index 285ab601c..92aa6209c 100644 --- a/packages/raystack/components/chip/chip.module.css +++ b/packages/raystack/components/chip/chip.module.css @@ -151,7 +151,8 @@ border-radius: var(--rs-radius-1); } -.dismiss-button:active { +.dismiss-button:active, +.chip-interactive:active { transform: scale(var(--rs-scale-pressed-strong)); } diff --git a/packages/raystack/components/combobox/combobox.module.css b/packages/raystack/components/combobox/combobox.module.css index 020f56e75..5cb8083a4 100644 --- a/packages/raystack/components/combobox/combobox.module.css +++ b/packages/raystack/components/combobox/combobox.module.css @@ -62,7 +62,7 @@ color: var(--rs-color-foreground-base-primary); white-space: normal; word-break: break-word; - border-radius: var(--rs-radius-2); + border-radius: var(--rs-radius-1); } .menuitem[data-highlighted] { diff --git a/packages/raystack/components/command/command.module.css b/packages/raystack/components/command/command.module.css index 0cbdd837e..9aa172d78 100644 --- a/packages/raystack/components/command/command.module.css +++ b/packages/raystack/components/command/command.module.css @@ -124,6 +124,7 @@ .empty { padding: var(--rs-space-7) var(--rs-space-3); text-align: center; + text-wrap: pretty; font-family: var(--rs-font-body); font-size: var(--rs-font-size-small); line-height: var(--rs-line-height-small); diff --git a/packages/raystack/components/dialog/dialog.module.css b/packages/raystack/components/dialog/dialog.module.css index 21fe23c74..5d1c2da63 100644 --- a/packages/raystack/components/dialog/dialog.module.css +++ b/packages/raystack/components/dialog/dialog.module.css @@ -117,6 +117,7 @@ font-weight: var(--rs-font-weight-regular); line-height: var(--rs-line-height-small); letter-spacing: var(--rs-letter-spacing-small); + text-wrap: pretty; margin: 0; } diff --git a/packages/raystack/components/drawer/drawer.module.css b/packages/raystack/components/drawer/drawer.module.css index f8304e1ef..65ae7b16f 100644 --- a/packages/raystack/components/drawer/drawer.module.css +++ b/packages/raystack/components/drawer/drawer.module.css @@ -166,6 +166,7 @@ line-height: var(--rs-line-height-regular); letter-spacing: var(--rs-letter-spacing-regular); color: var(--rs-color-foreground-base-secondary); + text-wrap: pretty; } .body { diff --git a/packages/raystack/components/field/field.module.css b/packages/raystack/components/field/field.module.css index 18dfd0d59..f460fdfa1 100644 --- a/packages/raystack/components/field/field.module.css +++ b/packages/raystack/components/field/field.module.css @@ -16,6 +16,7 @@ font-size: var(--rs-font-size-mini); line-height: var(--rs-line-height-mini); letter-spacing: var(--rs-letter-spacing-mini); + text-wrap: pretty; margin: 0; } @@ -25,6 +26,7 @@ font-size: var(--rs-font-size-mini); line-height: var(--rs-line-height-mini); letter-spacing: var(--rs-letter-spacing-mini); + text-wrap: pretty; margin: 0; } diff --git a/packages/raystack/components/headline/headline.module.css b/packages/raystack/components/headline/headline.module.css index 59f138b6e..d642ec7eb 100644 --- a/packages/raystack/components/headline/headline.module.css +++ b/packages/raystack/components/headline/headline.module.css @@ -5,6 +5,7 @@ font-family: var(--rs-font-title); font-weight: var(--rs-font-weight-regular); color: var(--rs-color-foreground-base-primary); + text-wrap: balance; } .headline-t1 { diff --git a/packages/raystack/components/indicator/indicator.module.css b/packages/raystack/components/indicator/indicator.module.css index 7296b41e3..3d922c5e5 100644 --- a/packages/raystack/components/indicator/indicator.module.css +++ b/packages/raystack/components/indicator/indicator.module.css @@ -11,6 +11,7 @@ display: inline-flex; align-items: center; justify-content: center; + font-variant-numeric: tabular-nums; border-radius: var(--rs-radius-full); white-space: nowrap; font-weight: var(--rs-font-weight-regular); diff --git a/packages/raystack/components/menu/menu.module.css b/packages/raystack/components/menu/menu.module.css index d2742bc87..d2cf06b17 100644 --- a/packages/raystack/components/menu/menu.module.css +++ b/packages/raystack/components/menu/menu.module.css @@ -94,6 +94,7 @@ justify-content: center; padding: var(--rs-space-4); text-align: center; + text-wrap: pretty; } .menuBarTrigger[data-pressed] { diff --git a/packages/raystack/components/message/message.module.css b/packages/raystack/components/message/message.module.css index c1636e146..cb9be88ab 100644 --- a/packages/raystack/components/message/message.module.css +++ b/packages/raystack/components/message/message.module.css @@ -138,6 +138,7 @@ inside it the bubble just fills what the text needs. */ max-width: 100%; min-width: 0; + text-wrap: pretty; padding: var(--rs-space-3) var(--rs-space-4); border-radius: var(--rs-radius-5); font-size: var(--rs-font-size-small); diff --git a/packages/raystack/components/meter/meter.module.css b/packages/raystack/components/meter/meter.module.css index 9d48fd127..c23ac4487 100644 --- a/packages/raystack/components/meter/meter.module.css +++ b/packages/raystack/components/meter/meter.module.css @@ -21,6 +21,7 @@ line-height: var(--rs-line-height-mini); letter-spacing: var(--rs-letter-spacing-mini); color: var(--rs-color-foreground-base-primary); + font-variant-numeric: tabular-nums; text-align: right; } diff --git a/packages/raystack/components/progress/progress.module.css b/packages/raystack/components/progress/progress.module.css index 58258d304..100f43fe8 100644 --- a/packages/raystack/components/progress/progress.module.css +++ b/packages/raystack/components/progress/progress.module.css @@ -21,6 +21,7 @@ line-height: var(--rs-line-height-mini); letter-spacing: var(--rs-letter-spacing-mini); color: var(--rs-color-foreground-base-primary); + font-variant-numeric: tabular-nums; text-align: right; } diff --git a/packages/raystack/components/reasoning/reasoning.module.css b/packages/raystack/components/reasoning/reasoning.module.css index 73f9d7316..5df068985 100644 --- a/packages/raystack/components/reasoning/reasoning.module.css +++ b/packages/raystack/components/reasoning/reasoning.module.css @@ -96,6 +96,7 @@ flex-direction: column; gap: var(--rs-space-3); padding-top: var(--rs-space-3); + text-wrap: pretty; } .reasoning-step { diff --git a/packages/raystack/components/select/select.module.css b/packages/raystack/components/select/select.module.css index cb77edb4d..c2d3c2032 100644 --- a/packages/raystack/components/select/select.module.css +++ b/packages/raystack/components/select/select.module.css @@ -47,7 +47,7 @@ color: var(--rs-color-foreground-base-primary); white-space: normal; word-break: break-word; - border-radius: var(--rs-radius-2); + border-radius: var(--rs-radius-1); } .menuitem[data-highlighted] { diff --git a/packages/raystack/components/switch/switch.module.css b/packages/raystack/components/switch/switch.module.css index f147df6fd..531ccfbac 100644 --- a/packages/raystack/components/switch/switch.module.css +++ b/packages/raystack/components/switch/switch.module.css @@ -56,7 +56,6 @@ background: var(--rs-color-foreground-base-emphasis); border-radius: var(--rs-radius-full); transform: translateX(var(--rs-space-1)); - will-change: transform; } @media (prefers-reduced-motion: no-preference) { diff --git a/packages/raystack/components/text/text.module.css b/packages/raystack/components/text/text.module.css index 755e1d77b..bbedf99ed 100644 --- a/packages/raystack/components/text/text.module.css +++ b/packages/raystack/components/text/text.module.css @@ -1,6 +1,7 @@ .text { margin: 0; color: var(--rs-color-foreground-base-primary); + text-wrap: pretty; } /* Text Size */ diff --git a/packages/raystack/components/toast/toast.module.css b/packages/raystack/components/toast/toast.module.css index b179fda49..298a6614b 100644 --- a/packages/raystack/components/toast/toast.module.css +++ b/packages/raystack/components/toast/toast.module.css @@ -288,6 +288,7 @@ /* ===== Description ===== */ .description { color: var(--rs-color-foreground-base-primary); + text-wrap: pretty; font-size: var(--rs-font-size-small); font-weight: var(--rs-font-weight-regular); line-height: var(--rs-line-height-small); diff --git a/packages/raystack/components/toggle/toggle.module.css b/packages/raystack/components/toggle/toggle.module.css index 158470ebd..3a15fc72f 100644 --- a/packages/raystack/components/toggle/toggle.module.css +++ b/packages/raystack/components/toggle/toggle.module.css @@ -9,7 +9,7 @@ transition: color var(--rs-duration-normal) var(--rs-ease-out); background-color: var(--rs-color-background-base-secondary); border: 0.5px solid var(--rs-color-border-base-primary); - border-radius: var(--rs-radius-1); + border-radius: var(--rs-radius-2); } .toggleContent { border-radius: var(--rs-radius-1); diff --git a/packages/raystack/components/toolbar/toolbar.module.css b/packages/raystack/components/toolbar/toolbar.module.css index 6c3b412e2..9291ee761 100644 --- a/packages/raystack/components/toolbar/toolbar.module.css +++ b/packages/raystack/components/toolbar/toolbar.module.css @@ -1,7 +1,7 @@ .root { padding: var(--rs-space-1); border: 0.5px solid var(--rs-color-border-base-primary); - border-radius: var(--rs-radius-2); + border-radius: var(--rs-radius-3); overflow: clip; } .root, diff --git a/packages/raystack/components/tooltip/tooltip.module.css b/packages/raystack/components/tooltip/tooltip.module.css index 8e8c3d15e..b171f54a0 100644 --- a/packages/raystack/components/tooltip/tooltip.module.css +++ b/packages/raystack/components/tooltip/tooltip.module.css @@ -17,6 +17,7 @@ letter-spacing: var(--rs-letter-spacing-mini); width: fit-content; max-width: 400px; + text-wrap: pretty; transition: opacity var(--rs-duration-fast) var(--rs-ease-out); } diff --git a/packages/raystack/components/tour/tour-parts.tsx b/packages/raystack/components/tour/tour-parts.tsx index a0d9e4cb6..9c52d887f 100644 --- a/packages/raystack/components/tour/tour-parts.tsx +++ b/packages/raystack/components/tour/tour-parts.tsx @@ -64,6 +64,7 @@ export function TourProgress({ format, ...props }: TourProgressProps) { size='mini' weight='medium' variant='secondary' + style={{ fontVariantNumeric: 'tabular-nums' }} {...props} > {format ? format(index, steps.length) : `${index + 1} of ${steps.length}`} diff --git a/packages/raystack/components/tour/tour.module.css b/packages/raystack/components/tour/tour.module.css index 8da74bdc6..3e10422ee 100644 --- a/packages/raystack/components/tour/tour.module.css +++ b/packages/raystack/components/tour/tour.module.css @@ -188,6 +188,7 @@ line-height: var(--rs-line-height-small); letter-spacing: var(--rs-letter-spacing-small); color: var(--rs-color-foreground-base-secondary); + text-wrap: pretty; } .footer {