Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -39,20 +39,20 @@ export const defaultColors: ThemeColors = {
950: '#102A56',
},
gray: {
25: '#FDFDFD',
50: '#FAFAFA',
100: '#F5F5F5',
200: '#E9EAEB',
300: '#D5D7DA',
400: '#A4A7AE',
500: '#717680',
600: '#535862',
700: '#414651',
25: '#FAFAFA',
50: '#F0F0F0',
100: '#E0E0E0',
200: '#D9D9D9',
300: '#BFBFBF',
400: '#A0A0A0',
500: '#808080',

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Quality: Neutral gray-500 lowers muted/placeholder text contrast on white

gray-500 moves from #717680 (~4.6:1 on white) to #808080 (~3.9:1 on white). Tokens that map to gray-500 on light surfaces — text-quaternary, text-placeholder, text-disabled (colors.md:113-115) — now fall below the WCAG AA 4.5:1 threshold for normal text. Since this is a designer-driven palette experiment, confirm the muted/placeholder contrast is acceptable or nudge gray-500 slightly darker before this leaves draft.

Was this helpful? React with 👍 / 👎

600: '#666666',
700: '#2E2E2E',
725: '#363636', // custom shade for search icon
750: '#404040', // custom shade
800: '#252B37',
900: '#181D27',
950: '#0A0D12',
800: '#222222',
900: '#191919',
950: '#141414',
},
blueGray: {
25: '#FCFCFD',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -207,18 +207,18 @@
--color-success-900: var(--color-success-900, #074d31);
--color-success-950: var(--color-success-950, #053321);

--color-gray-25: var(--color-gray-25, #fdfdfd);
--color-gray-50: var(--color-gray-50, #fafafa);
--color-gray-100: var(--color-gray-100, #f5f5f5);
--color-gray-200: var(--color-gray-200, #e9eaeb);
--color-gray-300: var(--color-gray-300, #d5d7da);
--color-gray-400: var(--color-gray-400, #a4a7ae);
--color-gray-500: var(--color-gray-500, #717680);
--color-gray-600: var(--color-gray-600, #535862);
--color-gray-700: var(--color-gray-700, #414651);
--color-gray-800: var(--color-gray-800, #252b37);
--color-gray-900: var(--color-gray-900, #181d27);
--color-gray-950: var(--color-gray-950, #0a0d12);
--color-gray-25: var(--color-gray-25, #fafafa);
--color-gray-50: var(--color-gray-50, #f0f0f0);
--color-gray-100: var(--color-gray-100, #e0e0e0);
--color-gray-200: var(--color-gray-200, #d9d9d9);
--color-gray-300: var(--color-gray-300, #bfbfbf);
--color-gray-400: var(--color-gray-400, #a0a0a0);
--color-gray-500: var(--color-gray-500, #808080);
--color-gray-600: var(--color-gray-600, #666666);
--color-gray-700: var(--color-gray-700, #2e2e2e);
--color-gray-800: var(--color-gray-800, #222222);
--color-gray-900: var(--color-gray-900, #191919);
--color-gray-950: var(--color-gray-950, #141414);

--color-gray-blue-25: rgb(252 252 253);
--color-gray-blue-50: rgb(248 249 252);
Expand Down Expand Up @@ -948,18 +948,18 @@

/* UTILITY COLORS */

--color-gray-25: rgb(250 250 250);
--color-gray-50: rgb(247 247 247);
--color-gray-100: rgb(240 240 241);
--color-gray-200: rgb(236 236 237);
--color-gray-300: rgb(206 207 210);
--color-gray-400: rgb(148 151 156);
--color-gray-500: rgb(133 136 142);
--color-gray-600: rgb(97 101 108);
--color-gray-700: rgb(55 58 65);
--color-gray-800: rgb(34 38 47);
--color-gray-900: rgb(19 22 27);
--color-gray-950: rgb(12 14 18);
--color-gray-25: #fafafa;
--color-gray-50: #f0f0f0;
--color-gray-100: #e0e0e0;
--color-gray-200: #d9d9d9;
--color-gray-300: #bfbfbf;
--color-gray-400: #a0a0a0;
--color-gray-500: #808080;
--color-gray-600: #666666;
--color-gray-700: #2e2e2e;
--color-gray-800: #222222;
--color-gray-900: #191919;
--color-gray-950: #141414;

--color-utility-blue-50: theme(--color-blue-950);
--color-utility-blue-100: theme(--color-blue-900);
Expand Down Expand Up @@ -1156,7 +1156,7 @@
/* BORDER COLORS */
--color-border-primary: theme(--color-gray-700);
--color-border-secondary: theme(--color-gray-800);
--color-border-secondary_alt: theme(--color-gray-800);
--color-border-secondary_alt: rgb(255 255 255 / 0.08);
--color-border-tertiary: theme(--color-gray-800);
--color-border-brand: theme(--color-brand-400);
--color-border-brand_alt: theme(--color-gray-700);
Expand Down
138 changes: 69 additions & 69 deletions openmetadata-ui/src/main/resources/ui/docs/colors.md

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,7 @@
"--om-legacy-color-e8e8e9": "#e8e8e9",
"--om-legacy-color-e8e8ed": "#e8e8ed",
"--om-legacy-color-e8ecf5": "#e8ecf5",
"--om-legacy-color-e9eaeb": "#e9eaeb",
"--om-legacy-color-eaecf0": "#eaecf0",
"--om-legacy-color-eaf0fb": "#eaf0fb",
"--om-legacy-color-ebeef1": "#ebeef1",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,18 +52,18 @@
"#085d3a": "--color-success-800",
"#074d31": "--color-success-900",
"#053321": "--color-success-950",
"#fdfdfd": "--color-gray-25",
"#fafafa": "--color-gray-50",
"#f5f5f5": "--color-gray-100",
"#e9eaeb": "--color-gray-200",
"#d5d7da": "--color-gray-300",
"#a4a7ae": "--color-gray-400",
"#717680": "--color-gray-500",
"#535862": "--color-gray-600",
"#414651": "--color-gray-700",
"#252b37": "--color-gray-800",
"#181d27": "--color-gray-900",
"#0a0d12": "--color-gray-950",
"#fafafa": "--color-gray-25",
"#f0f0f0": "--color-gray-50",
"#e0e0e0": "--color-gray-100",
"#d9d9d9": "--color-gray-200",
"#bfbfbf": "--color-gray-300",
"#a0a0a0": "--color-gray-400",
"#808080": "--color-gray-500",
"#666666": "--color-gray-600",
"#2e2e2e": "--color-gray-700",
"#222222": "--color-gray-800",
"#191919": "--color-gray-900",
"#141414": "--color-gray-950",
"#fcfcfd": "--color-gray-blue-25",
"#f8f9fc": "--color-gray-blue-50",
"#eaecf5": "--color-gray-blue-100",
Expand Down Expand Up @@ -120,14 +120,14 @@
"#1a1a1e": "--color-gray-iron-900",
"#131316": "--color-gray-iron-950",
"#f7f7f7": "--color-gray-true-50",
"#f5f5f5": "--color-gray-true-100",
"#e5e5e5": "--color-gray-true-200",
"#d6d6d6": "--color-gray-true-300",
"#a3a3a3": "--color-gray-true-400",
"#737373": "--color-gray-true-500",
"#525252": "--color-gray-true-600",
"#424242": "--color-gray-true-700",
"#292929": "--color-gray-true-800",
"#141414": "--color-gray-true-900",
"#0f0f0f": "--color-gray-true-950",
"#fdfdfc": "--color-gray-warm-25",
"#fafaf9": "--color-gray-warm-50",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -149,18 +149,18 @@ Fixed swatches. Prefer a semantic utility above where one fits. Use as `tw:bg-<s
| `fuchsia-800` | `#821890` | `tw:bg-fuchsia-800` |
| `fuchsia-900` | `#6f1877` | `tw:bg-fuchsia-900` |
| `fuchsia-950` | `#47104c` | `tw:bg-fuchsia-950` |
| `gray-25` | `#fdfdfd` | `tw:bg-gray-25` |
| `gray-50` | `#fafafa` | `tw:bg-gray-50` |
| `gray-100` | `#f5f5f5` | `tw:bg-gray-100` |
| `gray-200` | `#e9eaeb` | `tw:bg-gray-200` |
| `gray-300` | `#d5d7da` | `tw:bg-gray-300` |
| `gray-400` | `#a4a7ae` | `tw:bg-gray-400` |
| `gray-500` | `#717680` | `tw:bg-gray-500` |
| `gray-600` | `#535862` | `tw:bg-gray-600` |
| `gray-700` | `#414651` | `tw:bg-gray-700` |
| `gray-800` | `#252b37` | `tw:bg-gray-800` |
| `gray-900` | `#181d27` | `tw:bg-gray-900` |
| `gray-950` | `#0a0d12` | `tw:bg-gray-950` |
| `gray-25` | `#fafafa` | `tw:bg-gray-25` |
| `gray-50` | `#f0f0f0` | `tw:bg-gray-50` |
| `gray-100` | `#e0e0e0` | `tw:bg-gray-100` |
| `gray-200` | `#d9d9d9` | `tw:bg-gray-200` |
| `gray-300` | `#bfbfbf` | `tw:bg-gray-300` |
| `gray-400` | `#a0a0a0` | `tw:bg-gray-400` |
| `gray-500` | `#808080` | `tw:bg-gray-500` |
| `gray-600` | `#666666` | `tw:bg-gray-600` |
| `gray-700` | `#2e2e2e` | `tw:bg-gray-700` |
| `gray-800` | `#222222` | `tw:bg-gray-800` |
| `gray-900` | `#191919` | `tw:bg-gray-900` |
| `gray-950` | `#141414` | `tw:bg-gray-950` |
| `gray-blue-25` | `#fcfcfd` | `tw:bg-gray-blue-25` |
| `gray-blue-50` | `#f8f9fc` | `tw:bg-gray-blue-50` |
| `gray-blue-100` | `#eaecf5` | `tw:bg-gray-blue-100` |
Expand Down Expand Up @@ -217,14 +217,14 @@ Fixed swatches. Prefer a semantic utility above where one fits. Use as `tw:bg-<s
| `gray-neutral-800` | `#1f2a37` | `tw:bg-gray-neutral-800` |
| `gray-neutral-900` | `#111927` | `tw:bg-gray-neutral-900` |
| `gray-true-50` | `#f7f7f7` | `tw:bg-gray-true-50` |
| `gray-true-100` | `#f5f5f5` | `tw:bg-gray-true-100` |
| `gray-true-200` | `#e5e5e5` | `tw:bg-gray-true-200` |
| `gray-true-300` | `#d6d6d6` | `tw:bg-gray-true-300` |
| `gray-true-400` | `#a3a3a3` | `tw:bg-gray-true-400` |
| `gray-true-500` | `#737373` | `tw:bg-gray-true-500` |
| `gray-true-600` | `#525252` | `tw:bg-gray-true-600` |
| `gray-true-700` | `#424242` | `tw:bg-gray-true-700` |
| `gray-true-800` | `#292929` | `tw:bg-gray-true-800` |
| `gray-true-900` | `#141414` | `tw:bg-gray-true-900` |
| `gray-true-950` | `#0f0f0f` | `tw:bg-gray-true-950` |
| `gray-warm-25` | `#fdfdfc` | `tw:bg-gray-warm-25` |
| `gray-warm-50` | `#fafaf9` | `tw:bg-gray-warm-50` |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

Master map of every **project (`--om-*`) token** — the tokens components reference. Each references the matching upstream `globals.css` token (or holds a raw value) and resolves to the value shown. Full layering: [../README.md](../README.md).

Total project tokens: **799**.
Total project tokens: **789**.

## Spacing (61)

Expand Down Expand Up @@ -165,8 +165,10 @@ font-weight.

| Token | Value |
| --- | --- |
| `--om-font-mono` | `ui-monospace, 'Roboto Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` |
| `--om-font-sans` | `'Inter', 'Poppins', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif` |
| `--om-font-mono` | `ui-monospace, 'Roboto Mono', SFMono-Regular, Menlo, Monaco,
Consolas, 'Liberation Mono', 'Courier New', monospace` |
| `--om-font-sans` | `'Inter', 'Poppins', -apple-system, 'Segoe UI', Roboto, Arial,
sans-serif` |
| `--om-line-height-none` | `1` |
| `--om-line-height-normal` | `1.5` |
| `--om-line-height-relaxed` | `1.625` |
Expand All @@ -181,10 +183,14 @@ box-shadow. See foundations/elevation.md.
| --- | --- |
| `--om-shadow-2xl` | `0px 24px 48px -12px rgba(10, 13, 18, 0.18)` |
| `--om-shadow-3xl` | `0px 32px 64px -12px rgba(10, 13, 18, 0.14)` |
| `--om-shadow-lg` | `0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03)` |
| `--om-shadow-md` | `0px 4px 6px -1px rgba(10, 13, 18, 0.1), 0px 2px 4px -2px rgba(10, 13, 18, 0.06)` |
| `--om-shadow-sm` | `0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px -1px rgba(10, 13, 18, 0.1)` |
| `--om-shadow-xl` | `0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03)` |
| `--om-shadow-lg` | `0px 12px 16px -4px rgba(10, 13, 18, 0.08),
0px 4px 6px -2px rgba(10, 13, 18, 0.03)` |
| `--om-shadow-md` | `0px 4px 6px -1px rgba(10, 13, 18, 0.1),
0px 2px 4px -2px rgba(10, 13, 18, 0.06)` |
| `--om-shadow-sm` | `0px 1px 3px rgba(10, 13, 18, 0.1),
0px 1px 2px -1px rgba(10, 13, 18, 0.1)` |
| `--om-shadow-xl` | `0px 20px 24px -4px rgba(10, 13, 18, 0.08),
0px 8px 8px -4px rgba(10, 13, 18, 0.03)` |
| `--om-shadow-xs` | `0px 1px 2px rgba(10, 13, 18, 0.05)` |

## z-index (31)
Expand Down Expand Up @@ -394,18 +400,18 @@ Fixed swatches; do NOT adapt to dark mode. Prefer semantic tokens.
| `--om-color-fuchsia-800` | `#821890` |
| `--om-color-fuchsia-900` | `#6f1877` |
| `--om-color-fuchsia-950` | `#47104c` |
| `--om-color-gray-25` | `#fdfdfd` |
| `--om-color-gray-50` | `#fafafa` |
| `--om-color-gray-100` | `#f5f5f5` |
| `--om-color-gray-200` | `#e9eaeb` |
| `--om-color-gray-300` | `#d5d7da` |
| `--om-color-gray-400` | `#a4a7ae` |
| `--om-color-gray-500` | `#717680` |
| `--om-color-gray-600` | `#535862` |
| `--om-color-gray-700` | `#414651` |
| `--om-color-gray-800` | `#252b37` |
| `--om-color-gray-900` | `#181d27` |
| `--om-color-gray-950` | `#0a0d12` |
| `--om-color-gray-25` | `#fafafa` |
| `--om-color-gray-50` | `#f0f0f0` |
| `--om-color-gray-100` | `#e0e0e0` |
| `--om-color-gray-200` | `#d9d9d9` |
| `--om-color-gray-300` | `#bfbfbf` |
| `--om-color-gray-400` | `#a0a0a0` |
| `--om-color-gray-500` | `#808080` |
| `--om-color-gray-600` | `#666666` |
| `--om-color-gray-700` | `#2e2e2e` |
| `--om-color-gray-800` | `#222222` |
| `--om-color-gray-900` | `#191919` |
| `--om-color-gray-950` | `#141414` |
| `--om-color-gray-blue-25` | `#fcfcfd` |
| `--om-color-gray-blue-50` | `#f8f9fc` |
| `--om-color-gray-blue-100` | `#eaecf5` |
Expand Down Expand Up @@ -462,14 +468,14 @@ Fixed swatches; do NOT adapt to dark mode. Prefer semantic tokens.
| `--om-color-gray-neutral-800` | `#1f2a37` |
| `--om-color-gray-neutral-900` | `#111927` |
| `--om-color-gray-true-50` | `#f7f7f7` |
| `--om-color-gray-true-100` | `#f5f5f5` |
| `--om-color-gray-true-200` | `#e5e5e5` |
| `--om-color-gray-true-300` | `#d6d6d6` |
| `--om-color-gray-true-400` | `#a3a3a3` |
| `--om-color-gray-true-500` | `#737373` |
| `--om-color-gray-true-600` | `#525252` |
| `--om-color-gray-true-700` | `#424242` |
| `--om-color-gray-true-800` | `#292929` |
| `--om-color-gray-true-900` | `#141414` |
| `--om-color-gray-true-950` | `#0f0f0f` |
| `--om-color-gray-warm-25` | `#fdfdfc` |
| `--om-color-gray-warm-50` | `#fafaf9` |
Expand Down Expand Up @@ -649,11 +655,11 @@ Fixed swatches; do NOT adapt to dark mode. Prefer semantic tokens.

</details>

## Legacy colors (240)
## Legacy colors (230)

Exact migrated one-offs (migration debt). Do not use in new code; re-express with a semantic token.

<details><summary>Show all 240</summary>
<details><summary>Show all 230</summary>

| Token | Value |
| --- | --- |
Expand Down Expand Up @@ -691,7 +697,6 @@ Exact migrated one-offs (migration debt). Do not use in new code; re-express wit
| `--om-legacy-color-6b7280` | `#6b7280` |
| `--om-legacy-color-7f56d9` | `#7f56d9` |
| `--om-legacy-color-008a00` | `#008a00` |
| `--om-legacy-color-8a93a8` | `#8a93a8` |
| `--om-legacy-color-8c8c8c` | `#8c8c8c` |
| `--om-legacy-color-9-80-197-0-05` | `rgba(9, 80, 197, 0.05)` |
| `--om-legacy-color-10-13-18-0-1` | `rgba(10, 13, 18, 0.1)` |
Expand All @@ -702,9 +707,6 @@ Exact migrated one-offs (migration debt). Do not use in new code; re-express wit
| `--om-legacy-color-10-13-18-0-051` | `#0a0d120d` |
| `--om-legacy-color-10-13-18-0-059` | `#0a0d120f` |
| `--om-legacy-color-10-13-18-0-102` | `#0a0d121a` |
| `--om-legacy-color-11-16-33-0-96` | `rgba(11, 16, 33, 0.96)` |
| `--om-legacy-color-13-18-38-0-72` | `rgba(13, 18, 38, 0.72)` |
| `--om-legacy-color-13-18-38-0-85` | `rgba(13, 18, 38, 0.85)` |
| `--om-legacy-color-13c2c2` | `#13c2c2` |
| `--om-legacy-color-15-15-15-0-1` | `rgba(15, 15, 15, 0.1)` |
| `--om-legacy-color-15-23-42-0-06` | `rgba(15, 23, 42, 0.06)` |
Expand All @@ -728,7 +730,6 @@ Exact migrated one-offs (migration debt). Do not use in new code; re-express wit
| `--om-legacy-color-0066cc` | `#06c` |
| `--om-legacy-color-82-196-26-0-05` | `rgba(82, 196, 26, 0.05)` |
| `--om-legacy-color-85-155-238-0-2` | `rgba(85, 155, 238, 0.2)` |
| `--om-legacy-color-94a3b8` | `#94a3b8` |
| `--om-legacy-color-96-167-251-0-2` | `rgba(96, 167, 251, 0.2)` |
| `--om-legacy-color-102a72` | `#102a72` |
| `--om-legacy-color-107-114-128-0-15` | `rgba(107, 114, 128, 0.15)` |
Expand All @@ -754,11 +755,8 @@ Exact migrated one-offs (migration debt). Do not use in new code; re-express wit
| `--om-legacy-color-255-255-255-0` | `rgba(255, 255, 255, 0)` |
| `--om-legacy-color-255-255-255-0-1` | `rgba(255, 255, 255, 0.1)` |
| `--om-legacy-color-255-255-255-0-4` | `rgba(255, 255, 255, 0.4)` |
| `--om-legacy-color-255-255-255-0-07` | `rgba(255, 255, 255, 0.07)` |
| `--om-legacy-color-255-255-255-0-7` | `rgba(255, 255, 255, 0.7)` |
| `--om-legacy-color-255-255-255-0-08` | `rgba(255, 255, 255, 0.08)` |
| `--om-legacy-color-255-255-255-0-8` | `rgba(255, 255, 255, 0.8)` |
| `--om-legacy-color-255-255-255-0-14` | `rgba(255, 255, 255, 0.14)` |
| `--om-legacy-color-255-255-255-0-95` | `rgba(255, 255, 255, 0.95)` |
| `--om-legacy-color-255-255-255-0-302` | `#ffffff4d` |
| `--om-legacy-color-349dea` | `#349dea` |
Expand Down Expand Up @@ -802,7 +800,6 @@ Exact migrated one-offs (migration debt). Do not use in new code; re-express wit
| `--om-legacy-color-b1271c` | `#b1271c` |
| `--om-legacy-color-bbbbbb` | `#bbb` |
| `--om-legacy-color-bee5eb` | `#bee5eb` |
| `--om-legacy-color-c2c9d6` | `#c2c9d6` |
| `--om-legacy-color-c3e6cb` | `#c3e6cb` |
| `--om-legacy-color-c6b5f6` | `#c6b5f6` |
| `--om-legacy-color-c6c6c6` | `#c6c6c6` |
Expand Down Expand Up @@ -839,9 +836,9 @@ Exact migrated one-offs (migration debt). Do not use in new code; re-express wit
| `--om-legacy-color-e8e8e9` | `#e8e8e9` |
| `--om-legacy-color-e8e8ed` | `#e8e8ed` |
| `--om-legacy-color-e8ecf5` | `#e8ecf5` |
| `--om-legacy-color-e9eaeb` | `#e9eaeb` |
| `--om-legacy-color-e60000` | `#e60000` |
| `--om-legacy-color-eaecf0` | `#eaecf0` |
| `--om-legacy-color-eaf0fb` | `#eaf0fb` |
| `--om-legacy-color-ebeef1` | `#ebeef1` |
| `--om-legacy-color-ecedee` | `#ecedee` |
| `--om-legacy-color-eeeeee` | `#eeeeee` |
Expand All @@ -860,7 +857,6 @@ Exact migrated one-offs (migration debt). Do not use in new code; re-express wit
| `--om-legacy-color-f3f8ff` | `#f3f8ff` |
| `--om-legacy-color-f4f0fd` | `#f4f0fd` |
| `--om-legacy-color-f4f7f9` | `#f4f7f9` |
| `--om-legacy-color-f4f7fc` | `#f4f7fc` |
| `--om-legacy-color-f4f7ff` | `#f4f7ff` |
| `--om-legacy-color-f4fbf7` | `#f4fbf7` |
| `--om-legacy-color-f5c6cb` | `#f5c6cb` |
Expand Down
Loading
Loading