Files
supabase/apps/studio/styles/react-data-grid-logs.css
Saxon Fletcher 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 <[email protected]>
2026-07-03 15:00:43 +10:00

124 lines
2.2 KiB
CSS

@reference "./globals.css";
.data-grid--simple-logs {
.rdg {
overflow-x: auto;
min-width: 0;
}
.rdg-cell,
.rdg-cell span {
@apply text-foreground-light font-normal;
border-left: none;
border-right: none;
overflow: visible;
text-overflow: clip;
}
.rdg-cell {
display: flex;
align-items: center;
}
.rdg-cell:first-child {
@apply pl-5;
}
.rdg-cell:last-child {
@apply pr-5;
}
.rdg-row {
&.rdg-row--focused {
@apply border-r border-brand;
border-right-width: 4px;
}
&.rdg-row--focused .rdg-cell,
&.rdg-row--focused .rdg-cell span {
@apply !text-foreground;
}
}
}
.data-grid--logs-explorer {
@apply pb-12;
.rdg {
overflow-x: auto;
min-width: 0;
}
.rdg-cell,
.rdg-cell span {
@apply !text-foreground-light !font-normal;
border-left: none;
border-right: none;
overflow: visible;
text-overflow: clip;
}
.rdg-cell {
display: flex;
align-items: center;
}
.rdg-cell:first-child {
@apply pl-5;
}
.rdg-cell:last-child {
@apply pr-5;
}
.rdg-row {
&.rdg-row--focused {
@apply border-r border-brand;
border-right-width: 4px;
}
&.rdg-row--focused .rdg-cell,
&.rdg-row--focused .rdg-cell span {
@apply !text-foreground-light !font-semibold;
}
}
}
.syntax-highlight {
counter-reset: line-numbering;
font-family: Menlo, Monaco, monospace;
color: var(--foreground-lighter);
word-break: break-word;
}
.syntax-highlight .line::before {
content: counter(line-numbering);
counter-increment: line-numbering;
padding-right: 0px;
display: inline-block;
color: var(--border-stronger);
/* space after numbers */
width: 2rem;
text-align: left;
}
.logs-shimmering-loader {
animation: shimmer 1.5s infinite linear;
background: linear-gradient(
to right,
var(--background-default) 0%,
hsl(var(--brand-default)) 25%,
hsl(var(--brand-300)) 35%,
var(--background-default) 45%,
var(--background-surface-100) 75%
);
background-size: 3000px 100%;
}
@keyframes logsShimmer {
0% {
background-position: -1000px 0;
}
50% {
background-position: 1000px 0;
}
}