mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 02:15:05 +03:00
kemal.earth
67c983caef
## 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 fixes the following: - Our `<MetricCard />` and `<LogsBarChart />` which use `<ChartTitle />` were rendering the wrong font style for the title. The `font-mono` class being overwritten by recent changes, this helps sort cascade so it renders correct. - In our design system, the warning variable for charts was rendering black, this should be fixed to be our warning yellow. - There was an odd padding on `<MetricsCard />` content area, meaning our line chart wasn't flush to the edges, this required a small extension to `twMerge` so it could resolve. Please have a look around studio in places we have charts to double check nothing is broken. Also compare live design system vs. this branch by checking Logs Bar Chart, Charts and Metrics Card pages. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Refined heading typography for more consistent font and weight styling. * Improved class merging for custom spacing utilities. * **Bug Fixes** * Adjusted composed chart Y-axis sizing for clearer layouts. * Improved warning color fallbacks in log bar charts. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
494 lines
11 KiB
CSS
494 lines
11 KiB
CSS
@import 'config/tailwind.config.css';
|
|
@import './../../../packages/ui/build/css/themes/classic-dark.css';
|
|
@import 'config/typography.css';
|
|
|
|
@source '../pages/**/*.{js,ts,jsx,tsx}';
|
|
@source '../components/**/*.{js,ts,jsx,tsx}';
|
|
@source './../../../packages/ui/src/**/*.{tsx,ts,js}';
|
|
@source './../../../packages/ui-patterns/src/**/*.{tsx,ts,js}';
|
|
|
|
@theme inline {
|
|
--font-heading: var(--font-heading, var(--font-sans));
|
|
}
|
|
|
|
@theme {
|
|
--text-grid: 13px;
|
|
|
|
--color-typography-body-light: var(--foreground-light);
|
|
--color-typography-body-dark: var(--foreground-light);
|
|
--color-typography-body-secondary-light: var(--foreground-lighter);
|
|
--color-typography-body-secondary-dark: var(--foreground-lighter);
|
|
--color-typography-body-strong-light: var(--foreground-default);
|
|
--color-typography-body-strong-dark: var(--foreground-default);
|
|
--color-typography-body-faded-light: var(--foreground-muted);
|
|
--color-typography-body-faded-dark: var(--foreground-muted);
|
|
|
|
--color-table-body-light: var(--background-default);
|
|
--color-table-body-dark: var(--background-default);
|
|
--color-table-header-light: var(--background-surface-100);
|
|
--color-table-header-dark: var(--background-surface-100);
|
|
--color-table-footer-light: var(--background-surface-100);
|
|
--color-table-footer-dark: var(--background-surface-100);
|
|
--color-table-border-light: var(--border-default);
|
|
--color-table-border-dark: var(--border-default);
|
|
|
|
--color-panel-body-light: var(--background-surface-100);
|
|
--color-panel-body-dark: var(--background-surface-100);
|
|
--color-panel-header-light: var(--background-surface-100);
|
|
--color-panel-header-dark: var(--background-surface-100);
|
|
--color-panel-footer-light: var(--background-surface-100);
|
|
--color-panel-footer-dark: var(--background-surface-100);
|
|
--color-panel-border-light: var(--border-default);
|
|
--color-panel-border-dark: var(--border-default);
|
|
--color-panel-border-interior-light: var(--border-muted);
|
|
--color-panel-border-interior-dark: var(--border-muted);
|
|
--color-panel-border-hover-light: var(--border-muted);
|
|
--color-panel-border-hover-dark: var(--border-muted);
|
|
|
|
--animate-shimmer: shimmer 2s infinite linear;
|
|
--animate-badge-shimmer: badge-shimmer 3s ease-in-out infinite;
|
|
--animate-badge-pulse: badge-pulse 3s ease-in-out infinite;
|
|
--animate-chevron-up: chevron-up 2s ease-in-out infinite;
|
|
--animate-sway: sway 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
--animate-marketplace-featured-progress: marketplace-featured-progress linear forwards;
|
|
|
|
/* font sizing and weights optimized for Inter */
|
|
--text-sm: 0.8125rem;
|
|
--text-base: 0.9375rem;
|
|
--text-lg: 1rem;
|
|
--text-xl: 1.125rem;
|
|
--text-2xl: 1.375rem;
|
|
--text-3xl: 1.75rem;
|
|
--text-4xl: 2.125rem;
|
|
--text-5xl: 2.875rem;
|
|
--text-6xl: 3.625rem;
|
|
--text-7xl: 4.375rem;
|
|
--text-8xl: 5.875rem;
|
|
--text-9xl: 7.875rem;
|
|
--font-weight-normal: 450;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: -1000px 0;
|
|
}
|
|
100% {
|
|
background-position: 1000px 0;
|
|
}
|
|
}
|
|
|
|
@keyframes badge-shimmer {
|
|
0% {
|
|
transform: rotate(-45deg) translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: 1;
|
|
}
|
|
40% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: rotate(-45deg) translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: rotate(-45deg) translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes badge-pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
@keyframes chevron-up {
|
|
0%,
|
|
100% {
|
|
opacity: 0.2;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes sway {
|
|
0%,
|
|
100% {
|
|
transform: rotate(-10deg) scale(1.5) translateY(4rem);
|
|
}
|
|
50% {
|
|
transform: rotate(10deg) scale(1.5) translateY(2rem);
|
|
}
|
|
}
|
|
|
|
@keyframes marketplace-featured-progress {
|
|
from {
|
|
transform: scaleX(0);
|
|
}
|
|
to {
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--chart-1: hsl(var(--brand-default));
|
|
--chart-2: 173 58% 39%;
|
|
--chart-3: 197 37% 24%;
|
|
--chart-4: 43 74% 66%;
|
|
--chart-5: 27 87% 67%;
|
|
--chart-blue: 217 91% 60%;
|
|
--chart-warning: hsl(var(--warning-500));
|
|
--chart-warning-muted: hsl(var(--warning-400));
|
|
--chart-destructive: hsl(var(--destructive-default));
|
|
--chart-success: color-mix(in oklch, var(--foreground-muted) 50%, white);
|
|
--sidebar-background: var(--background-dash-sidebar);
|
|
--sidebar-foreground: var(--foreground-default);
|
|
--sidebar-primary: var(--foreground-default);
|
|
--sidebar-primary-foreground: var(--warning);
|
|
--sidebar-accent: var(--background-selection);
|
|
--sidebar-accent-foreground: var(--foreground-default);
|
|
--sidebar-border: var(--border-default);
|
|
--sidebar-ring: var(--ring);
|
|
--header-height: 3rem;
|
|
}
|
|
|
|
[data-theme='dark'],
|
|
.dark {
|
|
--chart-1: hsl(var(--brand-default));
|
|
--chart-2: 160 60% 45%;
|
|
--chart-3: 30 80% 55%;
|
|
--chart-4: 280 65% 60%;
|
|
--chart-5: 340 75% 55%;
|
|
--chart-blue: 217 91% 65%;
|
|
--chart-warning: hsl(var(--warning-default));
|
|
--chart-warning-muted: hsl(var(--warning-500));
|
|
--chart-destructive: hsl(var(--destructive-default));
|
|
--chart-success: color-mix(in oklch, var(--foreground-muted) 55%, var(--background));
|
|
--sidebar-background: var(--background-dash-sidebar);
|
|
--sidebar-foreground: var(--foreground-default);
|
|
--sidebar-primary: var(--foreground-default);
|
|
--sidebar-primary-foreground: var(--warning);
|
|
--sidebar-accent: var(--background-selection);
|
|
--sidebar-accent-foreground: var(--foreground-default);
|
|
--sidebar-border: var(--border-default);
|
|
--sidebar-ring: var(--ring);
|
|
}
|
|
|
|
@layer base {
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
border-color: var(--border-default, currentColor);
|
|
}
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#__next,
|
|
.main {
|
|
@apply bg-dash-sidebar relative;
|
|
@apply text-foreground;
|
|
@apply overflow-x-clip;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-font-smoothing: antialiased;
|
|
overscroll-behavior: none;
|
|
font-weight: 450;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@layer base {
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
@apply font-heading;
|
|
}
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
@apply font-semibold;
|
|
}
|
|
|
|
.form-group .form-text,
|
|
.Form .form-text {
|
|
@apply text-foreground-lighter;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group input[type='text'],
|
|
.form-group input[type='email'],
|
|
.form-group input[type='url'],
|
|
.form-group input[type='password'],
|
|
.form-group input[type='number'],
|
|
.form-group input[type='date'],
|
|
.form-group input[type='datetime-local'],
|
|
.form-group input[type='month'],
|
|
.form-group input[type='search'],
|
|
.form-group input[type='tel'],
|
|
.form-group input[type='time'],
|
|
.form-group input[type='week'],
|
|
.form-group input[multiple],
|
|
.form-group textarea,
|
|
.form-group select,
|
|
input.form-control,
|
|
.form-control input,
|
|
.form-control textarea {
|
|
@apply block;
|
|
@apply box-border;
|
|
/* @apply w-full ; */
|
|
@apply rounded-md;
|
|
@apply shadow-xs;
|
|
@apply transition-all;
|
|
@apply text-foreground;
|
|
@apply border;
|
|
@apply focus:shadow-md;
|
|
|
|
@apply focus:border-stronger;
|
|
@apply focus:ring-border-overlay;
|
|
|
|
@apply bg-studio;
|
|
@apply border-strong border;
|
|
|
|
@apply outline-hidden;
|
|
@apply focus:ring-2 focus:ring-current;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group select,
|
|
.form-group textarea {
|
|
@apply px-4 py-2;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group input[type='text']:focus,
|
|
.form-group input[type='email']:focus,
|
|
.form-group input[type='url']:focus,
|
|
.form-group input[type='password']:focus,
|
|
.form-group input[type='number']:focus,
|
|
.form-group input[type='date']:focus,
|
|
.form-group input[type='datetime-local']:focus,
|
|
.form-group input[type='month']:focus,
|
|
.form-group input[type='search']:focus,
|
|
.form-group input[type='tel']:focus,
|
|
.form-group input[type='time']:focus,
|
|
.form-group input[type='week']:focus,
|
|
.form-group input[multiple]:focus,
|
|
.form-group textarea:focus,
|
|
.form-group select:focus,
|
|
.form-group input:focus .form-control:focus {
|
|
box-shadow: 0 0 0 2px rgba(62, 207, 142, 0.1);
|
|
}
|
|
|
|
/* icons in date / time inputs */
|
|
.dark input[type='date']::-webkit-calendar-picker-indicator,
|
|
.dark input[type='datetime-local']::-webkit-calendar-picker-indicator,
|
|
.dark input[type='time']::-webkit-calendar-picker-indicator {
|
|
filter: invert(0.8);
|
|
}
|
|
|
|
input.is-invalid {
|
|
@apply bg-red-100;
|
|
@apply border border-red-700;
|
|
@apply focus:ring-red-500;
|
|
@apply placeholder:text-red-600;
|
|
}
|
|
|
|
input::placeholder {
|
|
@apply text-foreground-lighter;
|
|
}
|
|
|
|
.form-group input::placeholder {
|
|
@apply text-foreground-lighter;
|
|
}
|
|
|
|
.billing-input-fixed {
|
|
@apply w-full appearance-none rounded-sm border bg-gray-700 py-2 px-3 leading-tight text-gray-300 shadow-sm;
|
|
}
|
|
|
|
.input-mono {
|
|
input,
|
|
textarea {
|
|
@apply font-mono;
|
|
}
|
|
}
|
|
|
|
.input-sm {
|
|
input,
|
|
textarea {
|
|
@apply text-sm;
|
|
}
|
|
}
|
|
|
|
.input-xs {
|
|
input,
|
|
textarea {
|
|
@apply text-xs;
|
|
}
|
|
}
|
|
|
|
input[type='radio'] {
|
|
@apply p-0;
|
|
}
|
|
|
|
input[type='number'] {
|
|
-moz-appearance: textfield; /* Firefox, Not included in tailwind styles reset */
|
|
}
|
|
|
|
/* TODO: It doesnt' work, need to check */
|
|
.hide-scrollbar {
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
}
|
|
|
|
.hide-scrollbar::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
display: none;
|
|
}
|
|
|
|
div[data-radix-portal]:not(.portal--toast) {
|
|
z-index: 2147483646 !important;
|
|
}
|
|
|
|
.billing-compute-radio {
|
|
label {
|
|
@apply items-center justify-between;
|
|
&:last-child {
|
|
opacity: 100 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.recharts-tooltip-cursor {
|
|
@apply fill-transparent;
|
|
}
|
|
|
|
.expandable-tr {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
}
|
|
|
|
.expanded-row-content {
|
|
display: grid;
|
|
grid-column: 1/-1;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.multi-select {
|
|
button {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
html {
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
.text-area-resize-none {
|
|
textarea {
|
|
@apply resize-none;
|
|
}
|
|
}
|
|
|
|
.capitalize-sentence:first-letter {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.input-clear {
|
|
input {
|
|
@apply pr-7;
|
|
}
|
|
}
|
|
|
|
/* to do: remove this CSS and do the same thing in a reusable tooltip component */
|
|
[data-radix-popper-content-wrapper] {
|
|
@apply z-50!;
|
|
}
|
|
|
|
.settings-container {
|
|
@apply mx-auto max-w-4xl xl:max-w-6xl;
|
|
}
|
|
|
|
.react-grid-item.react-grid-placeholder {
|
|
@apply bg-brand-500!;
|
|
}
|
|
|
|
.react-grid-item > .react-resizable-handle::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 3px !important;
|
|
bottom: 3px !important;
|
|
width: 6px !important;
|
|
height: 6px !important;
|
|
@apply border-strong! dark:border-r-2! dark:border-b-2! dark:border-overlay!;
|
|
}
|
|
|
|
@keyframes typewriter {
|
|
from {
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes blink-caret {
|
|
50% {
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
/* Zoomable image (react-medium-image-zoom) */
|
|
|
|
[data-rmiz-modal]:focus,
|
|
[data-rmiz-modal-overlay]:focus {
|
|
outline: none !important;
|
|
}
|
|
|
|
[data-rmiz-modal-overlay],
|
|
[data-rmiz-modal-img] {
|
|
transition-timing-function: cubic-bezier(0.24, 0.25, 0.05, 1) !important;
|
|
}
|
|
|
|
[data-rmiz-modal-overlay='visible'] {
|
|
@apply bg-background!;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
[data-rmiz-modal-img] {
|
|
image-rendering: high-quality;
|
|
}
|
|
|
|
.prose.text-sm ol > li::before {
|
|
top: 0.05rem;
|
|
}
|
|
|
|
.prose.text-sm ul > li::before {
|
|
top: 0.65rem;
|
|
}
|
|
|
|
.prose :where(strong, b):not(:where([class~='not-prose'], [class~='not-prose'] *)),
|
|
strong,
|
|
b {
|
|
@apply font-bold;
|
|
}
|