From 951fddc64ac229abddfb2a3bc2526db43cba4926 Mon Sep 17 00:00:00 2001 From: Nour Malaeb Date: Mon, 26 Jan 2026 10:22:54 -0500 Subject: [PATCH 1/3] remove border radius defintions --- packages/styles/shared-styles.css | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/packages/styles/shared-styles.css b/packages/styles/shared-styles.css index 5ad8c0214..e3c3b115f 100644 --- a/packages/styles/shared-styles.css +++ b/packages/styles/shared-styles.css @@ -318,20 +318,6 @@ --color-accent-900: #171717; --color-accent-950: #0a0a0a; - /* ============================================ - * Border Radius (calc-based from --radius-lg) - * Set --radius-lg to your brand's default (0.375rem = rounded-md) - * All other radii are calculated relative to it - * ============================================ */ - --radius-lg: 0.375rem; - --radius-xs: calc(var(--radius-lg) * 0.25); - --radius-sm: calc(var(--radius-lg) * 0.5); - --radius-md: calc(var(--radius-lg) * 1.33); - --radius-xl: calc(var(--radius-lg) * 1.5); - --radius-2xl: calc(var(--radius-lg) * 2); - --radius-3xl: calc(var(--radius-lg) * 3); - --radius-4xl: calc(var(--radius-lg) * 4); - /* ============================================ * Box Shadows * ============================================ */ From 78266537ba0547367a6fc2ab0f422c341b931c50 Mon Sep 17 00:00:00 2001 From: Nour Malaeb Date: Mon, 26 Jan 2026 10:32:09 -0500 Subject: [PATCH 2/3] update readme --- packages/ui/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/README.md b/packages/ui/README.md index 90012e50c..46d36cb1e 100644 --- a/packages/ui/README.md +++ b/packages/ui/README.md @@ -76,6 +76,7 @@ After adding a component: 1. **Use existing components**: Where possible, replace Intent UI dependencies with existing `@op/ui` components. For example, replace the Intent UI checkbox import with `@/components/Checkbox`. 2. **Export the component**: Add an export to `package.json`: + ```json { "exports": { @@ -94,7 +95,6 @@ Intent UI components use CSS variables that are mapped to `@op/styles` tokens in - **Colors**: `--primary`, `--secondary`, `--danger`, etc. mapped to teal/neutral/red tokens - **Border color**: Default border color set via `var(--border)` on all elements -- **Border radius**: Calc-based system using `--radius-lg` as the base (0.375rem) To customize colors, edit the mappings in `intent-ui-theme.css`. From 9b368768bf986b272ee129b5e5cd3aa705d0ef3a Mon Sep 17 00:00:00 2001 From: Nour Malaeb Date: Wed, 4 Mar 2026 12:09:57 -0500 Subject: [PATCH 3/3] replace core colors with semantic colors --- packages/styles/shared-styles.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/styles/shared-styles.css b/packages/styles/shared-styles.css index e3c3b115f..81e6b2645 100644 --- a/packages/styles/shared-styles.css +++ b/packages/styles/shared-styles.css @@ -456,18 +456,18 @@ /* Base body styles */ body { - background-color: hsl(var(--op-white)); + background-color: var(--color-white); font-family: var(--font-sans); - color: hsl(var(--op-neutral-900)); + color: var(--color-neutral-charcoal); } /* Placeholder styles */ input::placeholder { - color: hsl(var(--op-neutral-500)); + color: var(--color-neutral-gray3); } textarea::placeholder { - color: hsl(var(--op-neutral-500)); + color: var(--color-neutral-gray3); } /* Hide Google extension bubble */ @@ -483,7 +483,7 @@ /* Default hr styling - Tailwind v4 reset removes borders */ hr { border-top-width: 1px; - border-color: hsl(var(--op-neutral-200)); + border-color: var(--color-neutral-gray1); } } @@ -495,7 +495,7 @@ @utility better-scrollbar { overflow-y: scroll; scrollbar-width: thin; - scrollbar-color: hsl(var(--op-neutral-600)) transparent; + scrollbar-color: var(--color-neutral-gray4) transparent; } @utility scrollable-hidden-scrollbar { @@ -542,7 +542,7 @@ /* Border glow utility */ @utility border-glow { - border: 1px solid hsl(var(--op-neutral-500) / 0.5); + border: 1px solid color-mix(in srgb, var(--color-neutral-gray3) 50%, transparent); background-clip: padding-box; backdrop-filter: blur(40px) contrast(1.5) saturate(3); box-shadow: