From b8afe4e26d3f8cc70e02876f49658cf4cb1214ae Mon Sep 17 00:00:00 2001 From: Rohan Chakraborty Date: Mon, 8 Jun 2026 13:56:34 +0530 Subject: [PATCH] feat: add global scrolbar style --- packages/raystack/styles/reset.css | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/raystack/styles/reset.css b/packages/raystack/styles/reset.css index b0840e37e..93a83486a 100644 --- a/packages/raystack/styles/reset.css +++ b/packages/raystack/styles/reset.css @@ -1,11 +1,21 @@ /* Resets for button */ button, -[type='button'], -[type='reset'], -[type='submit'] { +[type="button"], +[type="reset"], +[type="submit"] { -webkit-appearance: button; - appearance: button; + appearance: button; background-color: transparent; background-image: none; } + +/* Global native scrollbar styling — uses the Baseline standard scrollbar + properties (scrollbar-width / scrollbar-color), supported across Chrome, + Safari and Firefox. Note: scrollbar-width is keyword-only (no exact px) and + setting scrollbar-color opts out of the macOS overlay/auto-hide scrollbar. + Use the component where auto-hide / hover-grow polish matters. */ +* { + scrollbar-width: thin; + scrollbar-color: var(--rs-color-overlay-base-a5) transparent; +}