Skip to content

docs: correct dark-mode brand-primary and brand-border values in color reference #35395

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
detail-app wants to merge 1 commit into from
Closed

docs: correct dark-mode brand-primary and brand-border values in color reference #35395

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions openmetadata-ui/src/main/resources/ui/docs/colors.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ Use background tokens for surfaces, containers, cards, modals, and page-level ba

| Tailwind Class | CSS Variable | Light | Dark | When to Use |
|---|---|---|---|---|
| `tw:bg-brand-primary` | `--color-bg-brand-primary` | `#eff8ff` | Brand 500 at 14% | Light brand tint surface |
| `tw:bg-brand-primary` | `--color-bg-brand-primary` | `#eff8ff` | Brand 600 at 20% | Light brand tint surface |
| `tw:bg-brand-primary_alt` | `--color-bg-brand-primary_alt` | `#eff8ff` | `#191919` | Alternate brand tint |
| `tw:bg-brand-secondary` | `--color-bg-brand-secondary` | `#d1e9ff` | `#1570ef` | Stronger brand tint |
| `tw:bg-brand-solid` | `--color-bg-brand-solid` | `#1570ef` | `#1570ef` | Primary CTA button fill |
Expand Down Expand Up @@ -195,7 +195,7 @@ Use border tokens for input outlines, card dividers, separators, and table borde
| `tw:border-secondary` | `--color-border-secondary` | `#e9eaeb` (gray-200) | `#222222` (gray-800) | Existing subtle border |
| `tw:border-secondary_alt` | `--color-border-secondary_alt` | `rgba(0,0,0,0.08)` | White at 8% | Existing alpha-transparent border |
| `tw:border-tertiary` | `--color-border-tertiary` | `#f5f5f5` (gray-100) | `#222222` | Very subtle dividers |
| `tw:border-brand` | `--color-border-brand` | `#2e90fa` (brand-500) | `#53b1fd` (brand-400) | Focused inputs, selected states |
| `tw:border-brand` | `--color-border-brand` | `#2e90fa` (brand-500) | `#1570ef` (brand-600) | Focused inputs, selected states |
| `tw:border-brand_alt` | `--color-border-brand_alt` | `#1570ef` (brand-600) | `#2e2e2e` | Alternate brand border |
| `tw:border-brand-subtle` | `--color-border-brand-subtle` | `#84caff` | Brand 400 at 35% | Selected-state and info borders |
| `tw:border-error` | `--color-border-error` | `#f04438` (error-500) | `#f97066` (error-400) | Error state input/container border |
Expand Down Expand Up @@ -429,14 +429,14 @@ Brand tokens are for CTAs, highlighted navigation, brand-accented UI, and sectio
|---|---|---|---|
| `tw:bg-brand-solid` | `#1570ef` | `#1570ef` | Primary action button fill |
| `tw:bg-brand-solid_hover` | `#175cd3` | `#2e90fa` | CTA button hover state |
| `tw:bg-brand-primary` | `#eff8ff` | `#2e90fa` | Brand-tinted content area |
| `tw:bg-brand-primary` | `#eff8ff` | `#1570ef` | Brand-tinted content area |
| `tw:bg-brand-secondary` | `#d1e9ff` | `#1570ef` | Stronger brand-tinted area |
| `tw:bg-brand-section` | `#1849a9` | `#191919` | Full-width brand promo section |
| `tw:bg-brand-section_subtle` | `#175cd3` | `#141414` | Subtle brand promo section |
| `tw:text-brand-primary` | `#194185` | `#f0f0f0` | Strong brand text |
| `tw:text-brand-secondary` | `#175cd3` | `#bfbfbf` | Brand links |
| `tw:text-brand-tertiary` | `#1570ef` | `#a0a0a0` | Lighter brand text |
| `tw:border-brand` | `#2e90fa` | `#53b1fd` | Focused/selected border |
| `tw:border-brand` | `#2e90fa` | `#1570ef` | Focused/selected border |
| `tw:text-fg-brand-primary` | `#1570ef` | `#2e90fa` | Brand icons |

---
Expand Down
Loading