mirror of
https://github.com/supabase/supabase.git
synced 2026-09-22 13:37:53 +08:00
kemal.earth
7fce0a12d9
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? This is a first draft at introducing semantic colours to our Observability charts. This moves away from just random colours being assigned to prop after prop. They're only scoped to the Database reports right now, but if it flows nice, we can open it up to the other reports too. This also aims to tone down some of the harsher colours in our charts, such as the orange which sometimes can look like a warning metric/prop. | Before | After | |--------|--------| | <img width="839" height="336" alt="Screenshot 2026-06-10 at 09 14 56" src="https://github.com/user-attachments/assets/222747c5-973b-4165-aa53-df7b93412ad3" /> | <img width="950" height="341" alt="Screenshot 2026-09-14 at 18 14 47" src="https://github.com/user-attachments/assets/836f3ddd-4a97-4064-b8cf-3a3b435417ac" /> | cc @supabase/design for additional thoughts. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added semantic chart color roles with light and dark theme variants for consistent visualizations. * Standardized colors and fills across database, networking, storage, and connection charts. * Maximum-value lines now use configured chart colors when available. * Added chart palette reference and stress-test examples. * Added stacked bar charts, customizable margins, and gradient-filled line charts. * Improved multi-series bar chart focus and date-range footer alignment. * **Documentation** * Documented the chart palette, theme variants, accessibility guidance, and usage recommendations. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
43 lines
1.7 KiB
CSS
43 lines
1.7 KiB
CSS
@import 'tailwindcss';
|
|
|
|
/* JS plugins. Tailwind v4 supports `@plugin` for both v3-style JS plugins and
|
|
* v4-native packages. */
|
|
@plugin "@tailwindcss/typography";
|
|
@plugin "@tailwindcss/forms";
|
|
@import 'tw-animate-css';
|
|
|
|
/* Define the semantic system first, then override its core inputs per theme.
|
|
* This order is significant because :root and a single class selector have
|
|
* equal specificity. Radix/scale/brand --color-* values are inlined directly
|
|
* in colors.css below. */
|
|
@import '../ui/build/css/source/global.css';
|
|
@import '../ui/build/css/source/semantic.css';
|
|
@import '../ui/build/css/source/compat.css';
|
|
@import '../ui/build/css/themes/dark.css';
|
|
@import '../ui/build/css/themes/light.css';
|
|
|
|
/* Reset Tailwind's built-in color tokens before re-defining our own, so e.g.
|
|
* --color-amber-* doesn't ship a default Tailwind value alongside the Radix
|
|
* one. */
|
|
@import './unset-tw-colors.css';
|
|
|
|
/* Theme tokens + utilities + variants + base layer. colors.css declares the
|
|
* Radix/scale/brand --color-* CSS variables with per-theme values; theme.css
|
|
* consumes them from @theme inline so Tailwind generates the utilities. */
|
|
@import './css/colors.css';
|
|
@import './css/theme.css';
|
|
@import './css/charts.css';
|
|
@import './css/animations.css';
|
|
@import './css/utilities.css';
|
|
@import './tailwind-plugins/hit-area.css';
|
|
@import './css/variants.css';
|
|
@import './css/base.css';
|
|
|
|
/*
|
|
* Typography prose / prose-toc / prose-docs overrides live in a focused JS
|
|
* config because @tailwindcss/typography reads its theme.typography options
|
|
* from the JS config — not from CSS @theme tokens. See:
|
|
* https://github.com/tailwindlabs/tailwindcss-typography#customizing-the-css
|
|
*/
|
|
@config './typography.config.js';
|