From 2c0ef6e6aa4e45f341f4e77bb03f8a80dd3616bb Mon Sep 17 00:00:00 2001 From: Sundram Gupta Date: Wed, 22 Jul 2026 15:42:35 +0530 Subject: [PATCH] fix(oc-docs): unify topbar control heights to 28px and convert sizing to rem --- .../components/EnvSwitcher/StyledWrapper.ts | 11 +++++----- .../OpenInBrunoButton/StyledWrapper.ts | 14 ++++++------ .../Search/SearchBar/StyledWrapper.ts | 4 ++-- .../ShowVarsToggle/StyledWrapper.ts | 22 +++++++++---------- .../components/ThemeToggle/ThemeToggle.tsx | 10 ++++----- 5 files changed, 31 insertions(+), 30 deletions(-) diff --git a/packages/oc-docs/src/components/EnvSwitcher/StyledWrapper.ts b/packages/oc-docs/src/components/EnvSwitcher/StyledWrapper.ts index 2ac31dbb..006956f0 100644 --- a/packages/oc-docs/src/components/EnvSwitcher/StyledWrapper.ts +++ b/packages/oc-docs/src/components/EnvSwitcher/StyledWrapper.ts @@ -8,14 +8,15 @@ export const StyledWrapper = styled.div` display: inline-flex; align-items: center; gap: 0.4375rem; - padding: 0.21875rem 0.5rem; + height: 1.75rem; + padding: 0 0.5rem; box-sizing: border-box; background: var(--oc-app-collection-toolbar-environment-selector-bg); - border: 1px solid var(--oc-border-border1); + border: 0.0625rem solid var(--oc-border-border1); border-radius: var(--oc-radius); cursor: pointer; font-family: var(--font-sans); - font-size: 12px; + font-size: 0.75rem; font-weight: 500; color: var(--oc-app-collection-toolbar-environment-selector-text); transition: border-color 0.12s ease; @@ -39,12 +40,12 @@ export const StyledWrapper = styled.div` } .env-switcher-trigger-name { - max-width: 160px; + max-width: 10rem; } @media (max-width: 640px) { .env-switcher-trigger-name { - max-width: 72px; + max-width: 4.5rem; } } `; diff --git a/packages/oc-docs/src/components/OpenInBrunoButton/StyledWrapper.ts b/packages/oc-docs/src/components/OpenInBrunoButton/StyledWrapper.ts index 18721103..dd5bd04f 100644 --- a/packages/oc-docs/src/components/OpenInBrunoButton/StyledWrapper.ts +++ b/packages/oc-docs/src/components/OpenInBrunoButton/StyledWrapper.ts @@ -4,8 +4,8 @@ export const StyledWrapper = styled.span` display: inline-flex; align-items: center; justify-content: center; - gap: 6px; - height: 28px; + gap: 0.375rem; + height: 1.75rem; box-sizing: border-box; font-family: var(--font-sans); font-size: var(--oc-font-size-sm); @@ -15,13 +15,13 @@ export const StyledWrapper = styled.span` cursor: pointer; color: var(--oc-brand); background: var(--oc-background-base); - border: 1px solid var(--oc-brand); + border: 0.0625rem solid var(--oc-brand); border-radius: var(--oc-radius); transition: background-color 0.12s ease, opacity 0.12s ease; svg { - width: 16px; - height: 16px; + width: 1rem; + height: 1rem; flex: none; } @@ -30,11 +30,11 @@ export const StyledWrapper = styled.span` } &.is-full { - padding: 5px 10px; + padding: 0.3125rem 0.625rem; } &.is-icon { - width: 28px; + width: 1.75rem; padding: 0; } `; diff --git a/packages/oc-docs/src/components/Search/SearchBar/StyledWrapper.ts b/packages/oc-docs/src/components/Search/SearchBar/StyledWrapper.ts index 0fb32b82..456015df 100644 --- a/packages/oc-docs/src/components/Search/SearchBar/StyledWrapper.ts +++ b/packages/oc-docs/src/components/Search/SearchBar/StyledWrapper.ts @@ -16,7 +16,7 @@ export const StyledWrapper = styled.div` display: flex; flex-direction: column; background: var(--oc-background-mantle); - border: 1px solid var(--oc-border-border0); + border: 0.0625rem solid var(--oc-border-border0); border-radius: var(--oc-radius); overflow: hidden; } @@ -118,7 +118,7 @@ export const StyledWrapper = styled.div` padding: 0 0.75rem; box-sizing: border-box; flex-shrink: 0; - border-bottom: 1px solid var(--oc-border-border0); + border-bottom: 0.0625rem solid var(--oc-border-border0); } [data-testid='search-folder-filter'], .search-clear { diff --git a/packages/oc-docs/src/components/ShowVarsToggle/StyledWrapper.ts b/packages/oc-docs/src/components/ShowVarsToggle/StyledWrapper.ts index 1642c037..a29e0d6a 100644 --- a/packages/oc-docs/src/components/ShowVarsToggle/StyledWrapper.ts +++ b/packages/oc-docs/src/components/ShowVarsToggle/StyledWrapper.ts @@ -3,14 +3,14 @@ import styled from '@emotion/styled'; export const StyledWrapper = styled.button` display: inline-flex; align-items: center; - gap: 8px; + gap: 0.5rem; flex: none; padding: 0; background: transparent; border: none; cursor: pointer; font-family: var(--font-sans); - font-size: 12px; + font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); transition: color 0.12s ease; @@ -27,8 +27,8 @@ export const StyledWrapper = styled.button` .show-vars-track { position: relative; - width: 30px; - height: 16px; + width: 1.875rem; + height: 1rem; flex: none; border-radius: 999px; background: var(--oc-border-border2); @@ -37,10 +37,10 @@ export const StyledWrapper = styled.button` .show-vars-thumb { position: absolute; - top: 2px; - left: 2px; - width: 12px; - height: 12px; + top: 0.125rem; + left: 0.125rem; + width: 0.75rem; + height: 0.75rem; border-radius: 50%; background: var(--oc-background-base); transition: transform 0.16s ease; @@ -51,12 +51,12 @@ export const StyledWrapper = styled.button` } &[aria-checked='true'] .show-vars-thumb { - transform: translateX(14px); + transform: translateX(0.875rem); } &:focus-visible { - outline: 2px solid var(--oc-brand); - outline-offset: 2px; + outline: 0.125rem solid var(--oc-brand); + outline-offset: 0.125rem; border-radius: var(--oc-border-radius-base); } `; diff --git a/packages/oc-docs/src/components/ThemeToggle/ThemeToggle.tsx b/packages/oc-docs/src/components/ThemeToggle/ThemeToggle.tsx index 60d6a0a3..2be85d53 100644 --- a/packages/oc-docs/src/components/ThemeToggle/ThemeToggle.tsx +++ b/packages/oc-docs/src/components/ThemeToggle/ThemeToggle.tsx @@ -8,18 +8,18 @@ const Button = styled.button` align-items: center; justify-content: center; flex: none; - width: 26px; - height: 26px; + width: 1.75rem; + height: 1.75rem; background: transparent; color: var(--oc-colors-text-muted, var(--oc-text)); - border: 1px solid var(--oc-border-border0); + border: 0.0625rem solid var(--oc-border-border0); border-radius: var(--oc-radius); cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease; svg { - width: 14px; - height: 14px; + width: 0.875rem; + height: 0.875rem; } &:hover {