mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Danny White
d067e81a69
## Problem Primary colour serves readable text and selected controls, but those uses need different shades. Light mode needs darker text, while dark mode needs a deeper button fill. Fixed brand green on interactive chrome also prevents a custom primary hue from carrying through the interface. Some slider tracks and selected text are hard to read. ## Solution - Keep `--primary` for accessible text and small selected indicators. Use `--primary-solid` for button fills, which need a deeper shade in dark mode. - Add `--primary-bright` for focus rings, selected control chrome, chart accents, and other interactive highlights. It follows `--primary-hue`; `brand-*` stays fixed for Supabase identity. - Make slider troughs clearer and text selection translucent with theme foreground text. - Document the split in the design-system colour guide. | Before | After | | --- | --- | | <img width="980" height="244" alt="Before: light mode primary controls" src="https://github.com/user-attachments/assets/dfae325d-0dfe-4231-8bcd-3f89c4b9d793" /> | <img width="982" height="204" alt="After: light mode primary controls" src="https://github.com/user-attachments/assets/5fdcb531-a6e3-4549-8a13-9d9a5ebe6e20" /> | | <img width="610" height="120" alt="Before: slider track" src="https://github.com/user-attachments/assets/04f768e0-51e8-4d06-9b97-c52f4a34f122" /> | <img width="622" height="126" alt="After: slider track" src="https://github.com/user-attachments/assets/95127f4e-13dc-4f0f-b63c-cf5d70a28b42" /> | | <img width="652" height="512" alt="Before: dark mode controls" src="https://github.com/user-attachments/assets/3f88de66-90cc-40ee-8cf1-b5f4eb87b09a" /> | <img width="658" height="498" alt="After: dark mode controls" src="https://github.com/user-attachments/assets/906bec30-6ca1-4614-9fb3-6cf5e5feec22" /> | ## Review instructions 1. Compare light and dark mode in the [colour usage guide](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/color-usage#primary-and-brand-colors). Check primary ink, primary-solid, primary-bright, and fixed brand swatches. 2. In Studio, open the ‘new table’ sheet in [Table Editor](https://studio-staging-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/dashboard/project/_/editor). Tab through the new table sheet's fields and toggles. Check the focus rings, selected controls, and the sheet's edges in both themes. You do not need to save a table. 3. Select text in Studio in both themes, including a link or primary-coloured label. The selection and text should remain legible. 4. Check the [Field](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/field) Price Range slider: the unused track should remain visible in both themes. The selected field card border should follow primary-bright. 5. Check the [Button](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/button) and [Radio Group](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/radio-group) previews. In dark mode, `primary` button fill should be deeper than primary [text](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/color-usage#text); selected radios should remain readable.
124 lines
2.2 KiB
CSS
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-primary-bright;
|
|
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-primary-bright;
|
|
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%,
|
|
var(--primary-bright) 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;
|
|
}
|
|
}
|