mirror of
https://github.com/supabase/supabase.git
synced 2026-05-08 15:57:47 +08:00
afd690ada5
This PR migrates all tailwind configs in the apps to be CSS configs. They import a shared CSS Tailwind config from the `config` package (which in turns imports the old JS config). The shared JS config will be migrated to CSS in a followup PR. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Chores** * Centralized Tailwind into a config-driven entrypoint and updated the app build flow to use the new build step; many apps now import unified global styles. * **Style** * Migrated global styles to a Tailwind v4-style setup, added project-wide content scanning, consolidated theme imports, standardized theme tokens (including new --container-site max-width), and added a small prose utility to remove paragraph margins. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Sonnet 4.6 <[email protected]>
405 lines
9.4 KiB
CSS
405 lines
9.4 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 {
|
|
--text-grid: 13px;
|
|
|
|
--color-typography-body-light: hsl(var(--foreground-light));
|
|
--color-typography-body-dark: hsl(var(--foreground-light));
|
|
--color-typography-body-secondary-light: hsl(var(--foreground-lighter));
|
|
--color-typography-body-secondary-dark: hsl(var(--foreground-lighter));
|
|
--color-typography-body-strong-light: hsl(var(--foreground-default));
|
|
--color-typography-body-strong-dark: hsl(var(--foreground-default));
|
|
--color-typography-body-faded-light: hsl(var(--foreground-muted));
|
|
--color-typography-body-faded-dark: hsl(var(--foreground-muted));
|
|
|
|
--color-table-body-light: hsl(var(--background-default));
|
|
--color-table-body-dark: hsl(var(--background-default));
|
|
--color-table-header-light: hsl(var(--background-surface-100));
|
|
--color-table-header-dark: hsl(var(--background-surface-100));
|
|
--color-table-footer-light: hsl(var(--background-surface-100));
|
|
--color-table-footer-dark: hsl(var(--background-surface-100));
|
|
--color-table-border-light: hsl(var(--border-default));
|
|
--color-table-border-dark: hsl(var(--border-default));
|
|
|
|
--color-panel-body-light: hsl(var(--background-surface-100));
|
|
--color-panel-body-dark: hsl(var(--background-surface-100));
|
|
--color-panel-header-light: hsl(var(--background-surface-100));
|
|
--color-panel-header-dark: hsl(var(--background-surface-100));
|
|
--color-panel-footer-light: hsl(var(--background-surface-100));
|
|
--color-panel-footer-dark: hsl(var(--background-surface-100));
|
|
--color-panel-border-light: hsl(var(--border-default));
|
|
--color-panel-border-dark: hsl(var(--border-default));
|
|
--color-panel-border-interior-light: hsl(var(--border-muted));
|
|
--color-panel-border-interior-dark: hsl(var(--border-muted));
|
|
--color-panel-border-hover-light: hsl(var(--border-muted));
|
|
--color-panel-border-hover-dark: hsl(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;
|
|
}
|
|
|
|
@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);
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--chart-1: 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-default));
|
|
--chart-destructive: hsl(var(--destructive-default));
|
|
--sidebar-background: var(--background-dash-sidebar);
|
|
--sidebar-foreground: var(--foreground-default);
|
|
--sidebar-primary: var(--foreground-default);
|
|
--sidebar-primary-foreground: var(--warning-default);
|
|
--sidebar-accent: var(--background-selection);
|
|
--sidebar-accent-foreground: var(--foreground-default);
|
|
--sidebar-border: var(--border-default);
|
|
--sidebar-ring: 217.2 91.2% 59.8%;
|
|
--header-height: 3rem;
|
|
}
|
|
|
|
[data-theme='dark'],
|
|
.dark {
|
|
--chart-1: 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-destructive: hsl(var(--destructive-default));
|
|
--sidebar-background: var(--background-dash-sidebar);
|
|
--sidebar-foreground: var(--foreground-default);
|
|
--sidebar-primary: var(--foreground-default);
|
|
--sidebar-primary-foreground: var(--warning-default);
|
|
--sidebar-accent: var(--background-selection);
|
|
--sidebar-accent-foreground: var(--foreground-default);
|
|
--sidebar-border: var(--border-default);
|
|
--sidebar-ring: 217.2 91.2% 59.8%;
|
|
}
|
|
|
|
@layer base {
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
border-color: hsl(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;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|