diff --git a/packages/docs/pages/foundations/radius/best-practices.mdx b/packages/docs/pages/foundations/radius/best-practices.mdx index 3db4cb9644..52aa65052a 100644 --- a/packages/docs/pages/foundations/radius/best-practices.mdx +++ b/packages/docs/pages/foundations/radius/best-practices.mdx @@ -11,7 +11,7 @@ The radius used in a element is related to its size and placement. | Token | Usage | | :------------- | :---------------------------------------------------------------------------------------- | | `$radius-0` | Page components (Header and Content) and Admin Navigation components (Topbar and Sidebar) | -| `$radius-1` | Checkboxes and Buttons inside inputs | -| `$radius-2` | Buttons, Inputs, Filters, Alerts, Toasts, Cards, and Popovers | -| `$radius-3` | Modals | +| `$radius-1` | Checkboxes, Buttons inside inputs, and Tooltips | +| `$radius-2` | Buttons, Inputs, and Filters | +| `$radius-3` | Modals, Alerts, Toasts, Cards, and Popovers | | `$radius-full` | Tags and Avatars | diff --git a/packages/shoreline/src/themes/sunrise/components/alert.css b/packages/shoreline/src/themes/sunrise/components/alert.css index db85d4da1d..0ad1394f0e 100644 --- a/packages/shoreline/src/themes/sunrise/components/alert.css +++ b/packages/shoreline/src/themes/sunrise/components/alert.css @@ -4,7 +4,7 @@ justify-content: flex-start; padding: var(--sl-space-4) var(--sl-space-3) var(--sl-space-4) var(--sl-space-5); - border-radius: var(--sl-radius-2); + border-radius: var(--sl-radius-3); & [data-sl-alert-icon-container] { flex-shrink: 0; diff --git a/packages/shoreline/src/themes/sunrise/components/popover.css b/packages/shoreline/src/themes/sunrise/components/popover.css index b27be1b2f1..a2640fe4c8 100644 --- a/packages/shoreline/src/themes/sunrise/components/popover.css +++ b/packages/shoreline/src/themes/sunrise/components/popover.css @@ -2,7 +2,7 @@ background: var(--sl-bg-base); border: var(--sl-border-base); box-shadow: var(--sl-shadow-1); - border-radius: var(--sl-radius-2); + border-radius: var(--sl-radius-3); z-index: var(--sl-z-6); /* ideally we should be using Content to handle the padding */ /* but Container/Content don't seem to work in this case as documented on https://github.com/vtex/shoreline/issues/1338 */ diff --git a/packages/shoreline/src/themes/sunrise/components/toast.css b/packages/shoreline/src/themes/sunrise/components/toast.css index 9cd66b29cc..286730ff6f 100644 --- a/packages/shoreline/src/themes/sunrise/components/toast.css +++ b/packages/shoreline/src/themes/sunrise/components/toast.css @@ -8,7 +8,7 @@ font: var(--sl-text-emphasis-font); padding: var(--sl-space-4) var(--sl-space-5); width: 22.5rem; - border-radius: var(--sl-radius-2); + border-radius: var(--sl-radius-3); box-shadow: var(--sl-shadow-2); & [data-sl-toast-icon-container] { diff --git a/packages/shoreline/src/themes/sunrise/components/tooltip-popover.css b/packages/shoreline/src/themes/sunrise/components/tooltip-popover.css index 6f252e8f4f..00ab609637 100644 --- a/packages/shoreline/src/themes/sunrise/components/tooltip-popover.css +++ b/packages/shoreline/src/themes/sunrise/components/tooltip-popover.css @@ -6,7 +6,7 @@ font: var(--sl-text-caption-1-font); letter-spacing: var(--sl-text-caption-1-letter-spacing); max-width: var(--sl-tooltip-popover-max-width); - border-radius: var(--sl-radius-2); + border-radius: var(--sl-radius-1); padding: var(--sl-space-2) var(--sl-space-3); z-index: var(--sl-z-9); border: var(--sl-border-base-strong);