Commit Graph
4 Commits
Author SHA1 Message Date
Anthony Lio e25c0e83df fix(docs): table bottom border color missing (#49955)
## What kind of change does this PR introduce?

bug fix on table ui in docs

## What is the current behavior?

currently a recent change in
[#47288](https://github.com/supabase/supabase/pull/47288/changes#diff-57e15cf799459c10344c86d8ec797a16f0d3e824386e85552cb653594f7e616aR118)
made table bottom border color dimmed down vs others.

## What is the new behavior?

- fixes bottom border by targeting only border within the table (if that
was the initial intent?)

| state | preview |
| -------|------|
| before | <img width="787" height="320" alt="image"
src="https://github.com/user-attachments/assets/70eac743-255d-4848-9488-752e91a8793e"
/> |
| after | <img width="787" height="320" alt="image"
src="https://github.com/user-attachments/assets/e307dc33-6247-4f36-89d0-75d1eb1aef4e"
/> |

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Refined table styling so bottom borders appear only between body rows,
removing the border from the final row.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-04 07:57:32 +03:00
Danny White d1e7c403ac fix(ui): align Admonition titles and docs link hover with prose (#48428)
## What kind of change does this PR introduce?

UI bug fix.

## What is the current behavior?

After the recent Admonition a11y refactor:

- Titled Admonitions in MDX (blog and docs) could pick up large prose
top margin on the title, or (after follow-ups) end up with a title much
smaller than the body because the title was a `div` at `text-sm` while
body `<p>`s took prose ~15px
- Docs MDX links (including inside Admonitions) had a weak hover: prose
only shifted underline colour

Prior issues:

- A couple of guide callouts bolded link text via `[**…**](…)`
- Some funky Admonition formatting as called out in comments below

## What is the new behavior?

- `AlertTitle` is a `<p>` with `!mt-0 mb-0.5 font-medium` (not an `h5` /
bare `div`), so it does not break heading hierarchy and matches
admonition body font-size under prose
- Admonition uses `AlertTitle` again (though with `<p>` as explained
above) and wraps MDX `children` in `AlertDescription` (same as
`description`)
- `Alert` / `AlertTitle` / `AlertDescription` get `data-slot`
attributes; description keeps string→`<p>` wrapping, Studio density,
plus `text-balance`
- Docs link hover: typography `a:hover` and `MdxAnchor` now move text +
decoration toward foreground (InlineLink-like), without stealing brand
link colour via `text-inherit`
- Content: remove accidental bold on oauth-scopes and
multi-factor-authentication guide links

| Before | After |
| --- | --- |
| <img width="1360" height="378" alt="CleanShot 2026-07-29 at 16 44
48@2x"
src="https://github.com/user-attachments/assets/1aa98cb4-e691-428e-b7e2-a78afcdf518d"
/> | <img width="1350" height="362" alt="CleanShot 2026-07-29 at 16 44
08@2x"
src="https://github.com/user-attachments/assets/63c9c7df-c1c7-49c4-8fdb-0411ae251a71"
/> |
| <img width="1518" height="448" alt="CleanShot 2026-07-29 at 16 46
18@2x"
src="https://github.com/user-attachments/assets/d618e138-fcd7-4a44-b16d-cb0ac5ba6b0e"
/> | <img width="1524" height="424" alt="CleanShot 2026-07-29 at 16 46
30@2x"
src="https://github.com/user-attachments/assets/dbc7710e-42c6-483c-b367-19b2ff3a6475"
/> |
| <img width="1524" height="598" alt="CleanShot 2026-07-29 at 16 47
15@2x"
src="https://github.com/user-attachments/assets/c9c07f37-4e2b-40fa-bc90-c86a17e5ea32"
/> | <img width="1530" height="584" alt="CleanShot 2026-07-29 at 16 47
39@2x"
src="https://github.com/user-attachments/assets/806735f0-fa44-42e6-bd5a-127899d0bfc2"
/> |

## To test

**Docs**

1. [Functions
quickstart](https://docs-git-fix-admonition-alert-title-prose-supabase.vercel.app/docs/guides/functions/quickstart):
titled tip near the top. Title and body should be the same size, no
giant gap above the title
2. [BYO
MCP](https://docs-git-fix-admonition-alert-title-prose-supabase.vercel.app/docs/guides/ai-tools/byo-mcp):
tip with links. Hover a link (text + underline should both go
foreground)
3. [OAuth
scopes](https://docs-git-fix-admonition-alert-title-prose-supabase.vercel.app/docs/guides/integrations/build-a-supabase-oauth-integration/oauth-scopes):
note link is not bold
4. [Multi-factor
authentication](https://docs-git-fix-admonition-alert-title-prose-supabase.vercel.app/docs/guides/platform/multi-factor-authentication):
same, note link not bold

**Blog**

5. [CLI v2 config as
code](https://zone-www-dot-com-git-fix-admonition-alert-title-prose-supabase.vercel.app/blog/cli-v2-config-as-code):
titled Admonitions. Title size matches body, no huge top margin

**Other**

6. [Design system:
Admonition](https://design-system-git-fix-admonition-alert-title-prose-supabase.vercel.app/design-system/docs/fragments/admonition):
component reference
7. Studio (e.g. project Edge Functions secrets): Admonitions should stay
compact `text-sm` outside prose. Preview:
[studio-staging](https://studio-staging-git-fix-admonition-alert-title-prose-supabase.vercel.app)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

* **New Features**
  * None

* **Style**
* Improved link decoration consistency (underline/hover) across internal
and external documentation content, with safer external link handling.

* **Bug Fixes**
* Refined alert/admonition rendering for clearer title/description
semantics and better spacing/text wrapping.
* Updated documentation image rendering to avoid forwarding
whitespace-only children and adjusted chart image layout.

* **Tests**
  * Expanded assertions for alert/admonition structure and styling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-31 12:23:16 +10:00
Saxon FletcherandClaude Opus 4.8 fb02182e86 Color system (#47288)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES/NO

## What kind of change does this PR introduce?

Bug fix, feature, docs update, ...

## What is the current behavior?

Please link any relevant issues here.

## What is the new behavior?

Feel free to include screenshots if it includes visual changes.

## Additional context

Add any other context or screenshots.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Refreshed theming across the UI to use modern color expressions and
shared theme variables (including OKLCH-based gradients), improving
consistency for charts, code blocks, overlays, icons, and decorative
backgrounds.
* **Bug Fixes**
* Improved light/dark color and gradient consistency across axis/grid
styling, reference lines, buttons/badges, sidebar accents, loaders, and
other visual components.
* **Documentation**
* Updated styling/theming guidance to align with the revised semantic
token system and the updated theme variable usage patterns.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-03 15:00:43 +10:00
Ivan Vasilov 0abe792889 chore: Migrate the main Tailwind JS config to CSS (#45686)
This PR migrates the JS config for Tailwind into a CSS config. As such,
all variables have been defined as CSS variables and they're using the
specialized Tailwind syntax for generating utility classes.

Beside the migration, these changes were also added:
- Added `tailwind.config.css` to few packages to make the Tailwind
Intellisense work.
- Migrated away from Radix style color classes to our defined classes,
the values will remain the same.
- Most of the CSS is generated by scripts, they'll be removed in next
PRs.
* Removed redundant `border-light` classes from several components since
it was undefined.
* Removed redundant `text-strong` classes from several components since
it was undefined.

How to test:
- Open all apps, compare the UI (mainly colors) to builds from #45417
and try to find a difference.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Style**
* Harmonized color variable usages and updated UI color references
(affects palettes, charts, gradients, hero illustrations, and
scrollbars).
  * Tweaked border, tab, and selection visuals across components.

* **New Features**
* Added a suite of theme animations and refined typography presets used
by site prose and docs.

* **Refactor**
* Overhauled Tailwind/theme configuration and color token generation for
more consistent theming.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-13 13:14:58 +02:00