dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 01:15:03 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: Migrate all apps to use Tailwind CSS configs (#45530)

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Ivan VasilovandClaude Sonnet 4.6 authored and GitHub committed 2026-05-07 17:18:15 +02:00
1 parent c93212fdac
commit afd690ada5
38 files changed
+459 -645
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/design-system/styles/globals.css
+13 -8
View File
@@ -1,14 +1,19 @@
@import 'tailwindcss';
@import './../../../packages/ui/build/css/source/global.css';
@import './../../../packages/ui/build/css/themes/dark.css';
@import 'config/tailwind.config.css';
@import './../../../packages/ui/build/css/themes/classic-dark.css';
@import './../../../packages/ui/build/css/themes/light.css';
@config '../tailwind.config.js';
@import 'config/typography.css';
@source '../app/**/*.{js,ts,jsx,tsx}';
@source '../components/**/*.{js,ts,jsx,tsx}';
@source '../registry/**/*.{js,ts,jsx,tsx}';
@source '../content/**/*.mdx';
@source './../../../packages/ui/src/**/*.{tsx,ts,js}';
@source './../../../packages/ui-patterns/src/**/*.{tsx,ts,js}';
@theme {
/* added to get max-w-site */
--container-site: 128rem;
}
@layer base {
:root {
--chart-1: 12 76% 61%;
apps/design-system/tailwind.config.js
-21
View File
@@ -1,21 +0,0 @@
const config = require('config/tailwind.config')
module.exports = config({
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./registry/**/*.{js,ts,jsx,tsx}',
'./content/**/*.mdx',
// purge styles from grid library
//
'./../../packages/ui/src/**/*.{tsx,ts,js}',
'./../../packages/ui-patterns/src/**/*.{tsx,ts,js}',
],
theme: {
extend: {
maxWidth: {
site: '128rem',
},
},
},
})
apps/docs/app/layout.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import '@code-hike/mdx/styles.css'
import 'config/code-hike.css'
import 'ui-patterns/ShimmeringLoader/index.css'
import '../styles/main.css'
import '../styles/globals.css'
import '../styles/prism-okaidia.css'
import { GlobalProviders } from '~/features/app.providers'
apps/docs/styles/main.css → apps/docs/styles/globals.css
+18 -10
View File
@@ -1,11 +1,21 @@
@import 'tailwindcss';
@import './../../../packages/ui/build/css/source/global.css';
@import './../../../packages/ui/build/css/themes/dark.css';
@import 'config/tailwind.config.css';
@import './../../../packages/ui/build/css/themes/faux-classic-dark.css';
@import './../../../packages/ui/build/css/themes/light.css';
@config '../tailwind.config.cjs';
@source '../app/**/*.{ts,tsx,mdx}';
@source '../components/**/*.tsx';
@source '../content/**/*.{ts,tsx,mdx}';
@source '../docs/**/*.{tsx,mdx}';
@source '../features/**/*.{ts,tsx,mdx}';
@source '../layouts/**/*.tsx';
@source '../pages/**/*.{tsx,mdx}';
@source './../../../packages/ui/src/**/*.{tsx,ts,js}';
@source './../../../packages/ui-patterns/src/**/*.{tsx,ts,js}';
@layer utilities {
.prose--remove-p-margin p {
margin: 0;
}
}
@layer base {
*,
@@ -260,10 +270,8 @@ article p code {
}
/*
* sets the image in @Next/Image components
* to respect the height of the content
*
*/
* sets the image in @Next/Image components to respect the height of the content
*/
.next-image--dynamic-fill {
width: 100%;
grid-column: 1 / -1;
apps/docs/styles/prism-okaidia.css
+1 -1
View File
@@ -1,4 +1,4 @@
@reference './main.css';
@reference './globals.css';
/**
* okaidia theme for JavaScript, CSS and HTML
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
apps/docs/tailwind.config.cjs
-26
View File
@@ -1,26 +0,0 @@
const config = require('config/tailwind.config')
module.exports = config({
content: [
'./app/**/*.{ts,tsx,mdx}',
'./components/**/*.tsx',
'./content/**/*.{ts,tsx,mdx}',
'./docs/**/*.{tsx,mdx}',
'./features/**/*.{ts,tsx,mdx}',
'./layouts/**/*.tsx',
'./pages/**/*.{tsx,mdx}',
'./../../packages/ui/src/**/*.{tsx,ts,js}',
'./../../packages/ui-patterns/src/**/*.{tsx,ts,js}',
],
plugins: [
function ({ addUtilities, addVariant }) {
addUtilities({
// prose (tailwind typography) helpers
// useful for removing margins in prose styled sections
'.prose--remove-p-margin p': {
margin: '0',
},
})
},
],
})
apps/learn/styles/globals.css
+36 -6
View File
@@ -1,11 +1,41 @@
@import 'tailwindcss';
@import './../../../packages/ui/build/css/source/global.css';
@import './../../../packages/ui/build/css/themes/dark.css';
@import 'config/tailwind.config.css';
@import './../../../packages/ui/build/css/themes/classic-dark.css';
@import './../../../packages/ui/build/css/themes/light.css';
@config '../tailwind.config.js';
@source '../app/**/*.{ts,tsx}';
@source './../../../packages/ui/src/**/*.{tsx,ts,js}';
@source './../../../packages/ui-patterns/src/**/*.{tsx,ts,js}';
@theme {
/* added to get max-w-site */
--container-site: 128rem;
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
--color-background: hsl(var(--background));
--color-foreground: hsl(var(--foreground));
--color-card: hsl(var(--card));
--color-card-foreground: hsl(var(--card-foreground));
--color-popover: hsl(var(--popover));
--color-popover-foreground: hsl(var(--popover-foreground));
--color-primary: hsl(var(--primary));
--color-primary-foreground: hsl(var(--primary-foreground));
--color-secondary: hsl(var(--secondary));
--color-secondary-foreground: hsl(var(--secondary-foreground));
--color-muted: hsl(var(--muted));
--color-muted-foreground: hsl(var(--muted-foreground));
--color-accent: hsl(var(--accent));
--color-accent-foreground: hsl(var(--accent-foreground));
--color-destructive: hsl(var(--destructive));
--color-destructive-foreground: hsl(var(--destructive-foreground));
--color-border: hsl(var(--border));
--color-input: hsl(var(--input));
--color-ring: hsl(var(--ring));
--color-chart-1: hsl(var(--chart-1));
--color-chart-2: hsl(var(--chart-2));
--color-chart-3: hsl(var(--chart-3));
--color-chart-4: hsl(var(--chart-4));
--color-chart-5: hsl(var(--chart-5));
}
@layer base {
:root {
apps/learn/tailwind.config.js
-70
View File
@@ -1,70 +0,0 @@
const config = require('config/tailwind.config')
module.exports = config({
darkMode: ['class'],
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./registry/**/*.{js,ts,jsx,tsx}',
// purge styles from grid library
//
'./../../packages/ui/src/**/*.{tsx,ts,js}',
'./../../packages/ui-patterns/src/**/*.{tsx,ts,js}',
],
theme: {
extend: {
maxWidth: {
site: '128rem',
},
// The following variables are needed for the shadcn components in the examples to work. They're not clashing
// with the variables in the ui package.
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)',
},
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))',
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))',
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))',
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))',
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
1: 'hsl(var(--chart-1))',
2: 'hsl(var(--chart-2))',
3: 'hsl(var(--chart-3))',
4: 'hsl(var(--chart-4))',
5: 'hsl(var(--chart-5))',
},
},
},
},
})
apps/lite-studio/app/root.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration }
import type { Route } from './+types/root'
import './app.css'
import '../styles/globals.css'
export const links: Route.LinksFunction = () => [
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
apps/lite-studio/app/app.css → apps/lite-studio/styles/globals.css
+5 -8
View File
@@ -1,14 +1,11 @@
@import 'tailwindcss';
@import './../../../packages/ui/build/css/source/global.css';
@import './../../../packages/ui/build/css/themes/dark.css';
@import 'config/tailwind.config.css';
@import './../../../packages/ui/build/css/themes/classic-dark.css';
@import './../../../packages/ui/build/css/themes/light.css';
@config '../tailwind.config.js';
@import 'config/typography.css';
@source '../app/**/*.{ts,tsx}';
@source './../../../packages/ui/src/**/*.{tsx,ts,js}';
@source './../../../packages/ui-patterns/src/**/*.{tsx,ts,js}';
@font-face {
font-family: 'custom-font';
src:
apps/lite-studio/tailwind.config.js
-13
View File
@@ -1,13 +0,0 @@
const config = require('config/tailwind.config')
/** @type {import('tailwindcss').Config} */
export default config({
content: [
'./app/**/*.{ts,tsx}',
'./../../packages/ui/src/**/*.{tsx,ts,js}',
'./../../packages/ui-patterns/src/**/*.{tsx,ts,js}',
],
theme: {
extend: {},
},
})
apps/studio/components/interfaces/Integrations/GraphQL/graphiql.module.css
+1 -1
View File
@@ -1,4 +1,4 @@
@reference "../../../../styles/main.css";
@reference "../../../../styles/globals.css";
.root :global(.graphiql-sidebar) {
@apply border-r border-default;
apps/studio/pages/_app.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import '@/styles/editor.css'
import '@/styles/focus.css'
import '@/styles/graphiql-base.css'
import '@/styles/grid.css'
import '@/styles/main.css'
import '@/styles/globals.css'
import '@/styles/markdown-preview.css'
import '@/styles/monaco.css'
import '@/styles/react-data-grid-logs.css'
apps/studio/styles/code.css
+1 -1
View File
@@ -1,4 +1,4 @@
@reference "./main.css";
@reference "./globals.css";
.Code {
width: 100%;
apps/studio/styles/editor.css
+1 -1
View File
@@ -1,4 +1,4 @@
@reference "./main.css";
@reference "./globals.css";
.table-editor-columns .sbui-formlayout--responsive {
gap: 0rem !important;
apps/studio/styles/focus.css
+1 -1
View File
@@ -1,4 +1,4 @@
@reference "./main.css";
@reference "./globals.css";
/* Focus styles for keyboard navigation on interactive table rows */
.inset-focus {
apps/studio/styles/main.css → apps/studio/styles/globals.css
+106 -7
View File
@@ -1,13 +1,112 @@
@import 'tailwindcss';
@import './../../../packages/ui/build/css/source/global.css';
@import './../../../packages/ui/build/css/themes/dark.css';
@import './../../../packages/ui/build/css/themes/light.css';
@import 'config/tailwind.config.css';
@import './../../../packages/ui/build/css/themes/classic-dark.css';
@import 'config/typography.css';
@config '../tailwind.config.ts';
@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);
apps/studio/styles/grid.css
+1 -1
View File
@@ -1,4 +1,4 @@
@reference "./main.css";
@reference "./globals.css";
.sb-grid {
@apply flex h-full flex-col;
apps/studio/styles/markdown-preview.css
+1 -1
View File
@@ -1,4 +1,4 @@
@reference "./main.css";
@reference "./globals.css";
/* [Joshen] https://github.com/sindresorhus/github-markdown-css */
@media (prefers-color-scheme: dark) {
apps/studio/styles/monaco.css
+1 -1
View File
@@ -1,4 +1,4 @@
@reference "./main.css";
@reference "./globals.css";
.monaco-editor {
@apply relative overflow-visible;
apps/studio/styles/react-data-grid-logs.css
+1 -1
View File
@@ -1,4 +1,4 @@
@reference "./main.css";
@reference "./globals.css";
.data-grid--simple-logs {
.rdg {
apps/studio/styles/reactflow.css
+1 -1
View File
@@ -1,4 +1,4 @@
@reference "./main.css";
@reference "./globals.css";
.instance-configuration {
.react-flow__pane {
apps/studio/styles/storage.css
+1 -1
View File
@@ -1,4 +1,4 @@
@reference "./main.css";
@reference "./globals.css";
.storage-container {
.sbui-space-col {
apps/studio/styles/ui.css
+1 -1
View File
@@ -1,4 +1,4 @@
@reference "./main.css";
@reference "./globals.css";
/* Brought over from platform to be cleaned if needed */
/* Form panels */
apps/studio/tailwind.config.ts
-124
View File
@@ -1,124 +0,0 @@
/* eslint-disable no-restricted-exports */
import tailwindConfig from 'config/tailwind.config'
export default tailwindConfig({
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
// purge styles from grid library
'./../../packages/ui/src/**/*.{tsx,ts,js}',
'./../../packages/ui-patterns/src/**/*.{tsx,ts,js}',
],
theme: {
extend: {
fontSize: {
grid: '13px',
},
colors: {
/* typography */
'typography-body': {
light: 'hsl(var(--foreground-light))',
dark: 'hsl(var(--foreground-light))',
},
'typography-body-secondary': {
light: 'hsl(var(--foreground-lighter))',
dark: 'hsl(var(--foreground-lighter))',
},
'typography-body-strong': {
light: 'hsl(var(--foreground-default))',
dark: 'hsl(var(--foreground-default))',
},
'typography-body-faded': {
light: 'hsl(var(--foreground-muted))',
dark: 'hsl(var(--foreground-muted))',
},
/* Tables */
'table-body': {
light: 'hsl(var(--background-default))',
dark: 'hsl(var(--background-default))',
},
'table-header': {
light: 'hsl(var(--background-surface-100))',
dark: 'hsl(var(--background-surface-100))',
},
'table-footer': {
light: 'hsl(var(--background-surface-100))',
dark: 'hsl(var(--background-surface-100))',
},
'table-border': {
light: 'hsl(var(--border-default))',
dark: 'hsl(var(--border-default))',
},
/* Panels */
'panel-body': {
light: 'hsl(var(--background-surface-100))',
dark: 'hsl(var(--background-surface-100))',
},
'panel-header': {
light: 'hsl(var(--background-surface-100))',
dark: 'hsl(var(--background-surface-100))',
},
'panel-footer': {
light: 'hsl(var(--background-surface-100))',
dark: 'hsl(var(--background-surface-100))',
},
'panel-border': {
light: 'hsl(var(--border-default))',
dark: 'hsl(var(--border-default))',
},
'panel-border-interior': {
light: 'hsl(var(--border-muted))',
dark: 'hsl(var(--border-muted))',
},
'panel-border-hover': {
light: 'hsl(var(--border-muted))',
dark: 'hsl(var(--border-muted))',
},
},
animation: {
shimmer: 'shimmer 2s infinite linear',
'badge-shimmer': 'badge-shimmer 3s ease-in-out infinite',
'badge-pulse': 'badge-pulse 3s ease-in-out infinite',
'chevron-up': 'chevron-up 2s ease-in-out infinite',
sway: 'sway 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
keyframes: {
shimmer: {
'0%': {
'background-position': '-1000px 0',
},
'100%': {
'background-position': '1000px 0',
},
},
'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' },
},
'badge-pulse': {
'0%, 100%': { opacity: '1' },
'50%': { opacity: '0.8' },
},
'chevron-up': {
'0%, 100%': { opacity: '0.2' },
'50%': { opacity: '1' },
},
sway: {
'0%, 100%': {
transform: 'rotate(-10deg) scale(1.5) translateY(4rem)',
},
'50%': {
transform: 'rotate(10deg) scale(1.5) translateY(2rem)',
},
},
},
},
},
})
apps/ui-library/app/example/password-based-auth/layout.tsx
-1
View File
@@ -1,4 +1,3 @@
import { html } from 'monaco-editor'
import { Metadata } from 'next'
import { BaseInjector } from './../base-injector'
apps/ui-library/next.config.mjs
-4
View File
@@ -32,10 +32,6 @@ const nextConfig = {
},
]
},
eslint: {
// We are already running linting via GH action, this will skip linting during production build on Vercel
ignoreDuringBuilds: true,
},
}
export default withContentlayer(nextConfig)
apps/ui-library/package.json
+2 -1
View File
@@ -6,9 +6,10 @@
"scripts": {
"preinstall": "npx only-allow pnpm",
"dev": "next dev --port 3004",
"build": "pnpm run content:build && pnpm run build:registry && pnpm run build:llms && next build --turbopack",
"build": "pnpm run content:build && pnpm run build:registry && pnpm run build:llms && pnpm run build:app",
"build:registry": "rimraf -G public/r/* && tsx ./scripts/build-registry.mts && shadcn build public/r/registry.json && tsx scripts/clean-registry.ts",
"build:llms": "tsx ./scripts/build-llms-txt.ts",
"build:app": "next build --turbopack",
"start": "next start",
"lint": "eslint .",
"lint:mdx": "supa-mdx-lint content --config ../../supa-mdx-lint.config.toml",
apps/ui-library/styles/globals.css
+106 -140
View File
@@ -1,82 +1,120 @@
@import 'tailwindcss';
@import './../../../packages/ui/build/css/source/global.css';
@import './../../../packages/ui/build/css/themes/dark.css';
@import 'config/tailwind.config.css';
@import './../../../packages/ui/build/css/themes/classic-dark.css';
@import './../../../packages/ui/build/css/themes/light.css';
@config '../tailwind.config.js';
@source '../app/**/*.{js,ts,jsx,tsx}';
@source '../components/**/*.{js,ts,jsx,tsx}';
@source '../registry/**/*.{js,ts,jsx,tsx}';
@source '../content/**/*.mdx';
@source './../../../packages/ui/src/**/*.{tsx,ts,js}';
@source './../../../packages/ui-patterns/src/**/*.{tsx,ts,js}';
@theme {
/* added to get max-w-site */
--container-site: 128rem;
/* The following are needed to render the examples, since they use regular shadcn variables. Some classes are
* commented out classes because they clashed with Supabase defined classes
*/
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
/* --color-background: hsl(var(--background)); */
--color-foreground: hsl(var(--foreground));
--color-card: hsl(var(--card));
--color-card-foreground: hsl(var(--card-foreground));
--color-popover: hsl(var(--popover));
--color-popover-foreground: hsl(var(--popover-foreground));
--color-primary: hsl(var(--primary));
--color-primary-foreground: hsl(var(--primary-foreground));
--color-secondary: hsl(var(--secondary));
--color-secondary-foreground: hsl(var(--secondary-foreground));
--color-muted: hsl(var(--muted));
--color-muted-foreground: hsl(var(--muted-foreground));
--color-accent: hsl(var(--accent));
--color-accent-foreground: hsl(var(--accent-foreground));
--color-destructive: hsl(var(--destructive));
--color-destructive-foreground: hsl(var(--destructive-foreground));
/* --color-border: hsl(var(--border)); */
--color-input: hsl(var(--input));
--color-ring: hsl(var(--ring));
--color-chart-1: hsl(var(--chart-1));
--color-chart-2: hsl(var(--chart-2));
--color-chart-3: hsl(var(--chart-3));
--color-chart-4: hsl(var(--chart-4));
--color-chart-5: hsl(var(--chart-5));
}
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 224 71.4% 4.1%;
--foreground: 0 0% 14.5%;
--card: 0 0% 100%;
--card-foreground: 224 71.4% 4.1%;
--card-foreground: 0 0% 14.5%;
--popover: 0 0% 100%;
--popover-foreground: 224 71.4% 4.1%;
--primary: 220.9 39.3% 11%;
--primary-foreground: 210 20% 98%;
--secondary: 220 14.3% 95.9%;
--secondary-foreground: 220.9 39.3% 11%;
--muted: 220 14.3% 95.9%;
--muted-foreground: 220 8.9% 46.1%;
--accent: 220 14.3% 95.9%;
--accent-foreground: 220.9 39.3% 11%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 84.2% 60.2%;
--border: 220 13% 91%;
--input: 220 13% 91%;
--ring: 220 13% 70.8%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--popover-foreground: 0 0% 14.5%;
--primary: 0 0% 20.5%;
--primary-foreground: 0 0% 98.5%;
--secondary: 0 0% 97%;
--secondary-foreground: 0 0% 20.5%;
--muted: 0 0% 97%;
--muted-foreground: 0 0% 55.6%;
--accent: 0 0% 97%;
--accent-foreground: 0 0% 20.5%;
--destructive: 27.3 24.5% 57.7%;
--destructive-foreground: 27.3 24.5% 57.7%;
--border: 0 0% 92.2%;
--input: 0 0% 92.2%;
--ring: 0 0% 70.8%;
--chart-1: 41.1 22.2% 64.6%;
--chart-2: 184.7 11.8% 60%;
--chart-3: 227.4 7% 39.8%;
--chart-4: 84.4 18.9% 82.8%;
--chart-5: 70.1 18.8% 76.9%;
--radius: 0.625rem;
--sidebar: 210 20% 98.5%;
--sidebar-foreground: 224 71.4% 4.1%;
--sidebar-primary: 220.9 39.3% 11%;
--sidebar-primary-foreground: 210 20% 98%;
--sidebar-accent: 220 14.3% 95.9%;
--sidebar-accent-foreground: 220.9 39.3% 11%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 220 13% 70.8%;
--sidebar: 0 0% 98.5%;
--sidebar-foreground: 0 0% 14.5%;
--sidebar-primary: 0 0% 20.5%;
--sidebar-primary-foreground: 0 0% 98.5%;
--sidebar-accent: 0 0% 97%;
--sidebar-accent-foreground: 0 0% 20.5%;
--sidebar-border: 0 0% 92.2%;
--sidebar-ring: 0 0% 70.8%;
}
.dark {
--background: 224 71.4% 4.1%;
--foreground: 210 20% 98%;
--card: 224 71.4% 4.1%;
--card-foreground: 210 20% 98%;
--popover: 224 71.4% 4.1%;
--popover-foreground: 210 20% 98%;
--primary: 210 20% 98%;
--primary-foreground: 220.9 39.3% 11%;
--secondary: 215 27.9% 16.9%;
--secondary-foreground: 210 20% 98%;
--muted: 215 27.9% 16.9%;
--muted-foreground: 217.9 10.6% 64.9%;
--accent: 215 27.9% 16.9%;
--accent-foreground: 210 20% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 84.2% 60.2%;
--border: 215 27.9% 16.9%;
--input: 215 27.9% 16.9%;
--ring: 217.9 10.6% 55.6%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
--sidebar: 220.9 39.3% 11%;
--sidebar-foreground: 210 20% 98%;
--sidebar-primary: 220 70% 50%;
--sidebar-primary-foreground: 210 20% 98%;
--sidebar-accent: 215 27.9% 16.9%;
--sidebar-accent-foreground: 210 20% 98%;
--sidebar-border: 215 27.9% 16.9%;
--sidebar-ring: 220 13% 43.9%;
[data-theme='dark'],
[data-theme='classic-dark'] {
--background: 0 0% 14.5%;
--foreground: 0 0% 98.5%;
--card: 0 0% 0%;
--card-foreground: 0 0% 98.5%;
--popover: 0 0% 14.5%;
--popover-foreground: 0 0% 98.5%;
--primary: 0 0% 98.5%;
--primary-foreground: 0 0% 20.5%;
--secondary: 0 0% 26.9%;
--secondary-foreground: 0 0% 98.5%;
--muted: 0 0% 26.9%;
--muted-foreground: 0 0% 70.8%;
--accent: 0 0% 26.9%;
--accent-foreground: 0 0% 98.5%;
--destructive: 25.7 14.1% 39.6%;
--destructive-foreground: 25.3 23.7% 63.7%;
--border: 0 0% 26.9%;
--input: 0 0% 26.9%;
--ring: 0 0% 55.6%;
--chart-1: 264.4 24.3% 48.8%;
--chart-2: 162.5 17% 69.6%;
--chart-3: 70.1 18.8% 76.9%;
--chart-4: 303.9 26.5% 62.7%;
--chart-5: 16.4 24.6% 64.5%;
--sidebar: 0 0% 20.5%;
--sidebar-foreground: 0 0% 98.5%;
--sidebar-primary: 264.4 24.3% 48.8%;
--sidebar-primary-foreground: 0 0% 98.5%;
--sidebar-accent: 0 0% 26.9%;
--sidebar-accent-foreground: 0 0% 98.5%;
--sidebar-border: 0 0% 26.9%;
--sidebar-ring: 0 0% 43.9%;
}
}
@@ -122,78 +160,6 @@
}
}
.preview {
--background: 0 0% 100%;
--foreground: 0 0% 14.5%;
--card: 0 0% 100%;
--card-foreground: 0 0% 14.5%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 14.5%;
--primary: 0 0% 20.5%;
--primary-foreground: 0 0% 98.5%;
--secondary: 0 0% 97%;
--secondary-foreground: 0 0% 20.5%;
--muted: 0 0% 97%;
--muted-foreground: 0 0% 55.6%;
--accent: 0 0% 97%;
--accent-foreground: 0 0% 20.5%;
--destructive: 27.3 24.5% 57.7%;
--destructive-foreground: 27.3 24.5% 57.7%;
--border: 0 0% 92.2%;
--input: 0 0% 92.2%;
--ring: 0 0% 70.8%;
--chart-1: 41.1 22.2% 64.6%;
--chart-2: 184.7 11.8% 60%;
--chart-3: 227.4 7% 39.8%;
--chart-4: 84.4 18.9% 82.8%;
--chart-5: 70.1 18.8% 76.9%;
--radius: 0.625rem;
--sidebar: 0 0% 98.5%;
--sidebar-foreground: 0 0% 14.5%;
--sidebar-primary: 0 0% 20.5%;
--sidebar-primary-foreground: 0 0% 98.5%;
--sidebar-accent: 0 0% 97%;
--sidebar-accent-foreground: 0 0% 20.5%;
--sidebar-border: 0 0% 92.2%;
--sidebar-ring: 0 0% 70.8%;
}
[data-theme='dark'] .preview,
[data-theme='classic-dark'] .preview {
--background: 0 0% 14.5%;
--foreground: 0 0% 98.5%;
--card: 0 0% 0%;
--card-foreground: 0 0% 98.5%;
--popover: 0 0% 14.5%;
--popover-foreground: 0 0% 98.5%;
--primary: 0 0% 98.5%;
--primary-foreground: 0 0% 20.5%;
--secondary: 0 0% 26.9%;
--secondary-foreground: 0 0% 98.5%;
--muted: 0 0% 26.9%;
--muted-foreground: 0 0% 70.8%;
--accent: 0 0% 26.9%;
--accent-foreground: 0 0% 98.5%;
--destructive: 25.7 14.1% 39.6%;
--destructive-foreground: 25.3 23.7% 63.7%;
--border: 0 0% 26.9%;
--input: 0 0% 26.9%;
--ring: 0 0% 55.6%;
--chart-1: 264.4 24.3% 48.8%;
--chart-2: 162.5 17% 69.6%;
--chart-3: 70.1 18.8% 76.9%;
--chart-4: 303.9 26.5% 62.7%;
--chart-5: 16.4 24.6% 64.5%;
--sidebar: 0 0% 20.5%;
--sidebar-foreground: 0 0% 98.5%;
--sidebar-primary: 264.4 24.3% 48.8%;
--sidebar-primary-foreground: 0 0% 98.5%;
--sidebar-accent: 0 0% 26.9%;
--sidebar-accent-foreground: 0 0% 98.5%;
--sidebar-border: 0 0% 26.9%;
--sidebar-ring: 0 0% 43.9%;
}
.preview * {
@apply border-border outline-ring/50;
}
apps/ui-library/tailwind.config.js
-69
View File
@@ -1,69 +0,0 @@
const config = require('config/tailwind.config')
module.exports = config({
darkMode: ['class'],
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./registry/**/*.{js,ts,jsx,tsx}',
'./content/**/*.mdx',
'./../../packages/ui/src/**/*.{tsx,ts,js}',
'./../../packages/ui-patterns/src/**/*.{tsx,ts,js}',
],
theme: {
extend: {
maxWidth: {
site: '128rem',
},
// The following variables are needed for the shadcn components in the examples to work. They're not clashing
// with the variables in the ui package.
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)',
},
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))',
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))',
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))',
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))',
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
1: 'hsl(var(--chart-1))',
2: 'hsl(var(--chart-2))',
3: 'hsl(var(--chart-3))',
4: 'hsl(var(--chart-4))',
5: 'hsl(var(--chart-5))',
},
},
},
},
})
apps/www/app/layout.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import '@code-hike/mdx/styles.css'
import 'config/code-hike.css'
import '../styles/index.css'
import '../styles/globals.css'
import '../pages/launch-week/launchWeek.css'
import { Metadata } from 'next'
apps/www/pages/_app.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import '@code-hike/mdx/styles.css'
import 'config/code-hike.css'
import '../styles/index.css'
import '../styles/globals.css'
import './launch-week/launchWeek.css'
import {
apps/www/styles/career.module.css
+1 -1
View File
@@ -1,4 +1,4 @@
@reference './index.css';
@reference './globals.css';
.contributors-bg-circle {
@apply bg-gradient-to-r from-background-alternative via-border-strong to-background-alternative rounded-full p-[1px] aspect-square absolute;
apps/www/styles/index.css → apps/www/styles/globals.css
+106 -19
View File
@@ -1,11 +1,107 @@
@import 'tailwindcss';
@import './../../../packages/ui/build/css/source/global.css';
@import './../../../packages/ui/build/css/themes/dark.css';
@import 'config/tailwind.config.css';
@import './../../../packages/ui/build/css/themes/faux-classic-dark.css';
@import './../../../packages/ui/build/css/themes/light.css';
@config '../tailwind.config.js';
@source '../_blog/*.mdx';
@source '../components/**/*.tsx';
@source '../data/**/*.tsx';
@source '../layouts/**/*.tsx';
@source '../lib/mdx/mdxComponents.tsx';
@source '../pages/**/*.{tsx,mdx}';
@source '../app/**/*.{tsx,ts,js}';
@source './../../../packages/ui/src/**/*.{tsx,ts,js}';
@source './../../../packages/ui-patterns/src/**/*.{tsx,ts,js}';
@source './../../../packages/marketing/src/**/*.{tsx,ts,js}';
@theme {
--color-purple-sos-100: hsl(293 80% 97%);
--color-purple-sos-200: hsl(293 85% 91%);
--color-purple-sos-300: hsl(293 90% 80%);
--color-purple-sos-400: hsl(293 95% 67%);
--color-purple-sos-500: hsl(293 100% 54%);
--color-purple-sos-600: hsl(293 100% 44%);
--color-purple-sos-700: hsl(293 100% 34%);
--color-purple-sos-800: hsl(293 95% 22%);
--color-purple-sos-900: hsl(293 90% 12%);
--animate-flash-code: flash-code 1s forwards;
--animate-flash-code-slow: flash-code 2s forwards;
--animate-spinner: spinner 1s both infinite;
--animate-marquee: marquee 35s linear infinite;
--animate-marquee-vertical: marquee-vertical 180s linear infinite both;
--animate-pulse-radar: pulse-radar 3s linear infinite;
--animate-slide-in: slideIn 250ms ease-in both;
--delay-1200: 1200ms;
--delay-1500: 1500ms;
}
@keyframes flash-code {
0% {
background-color: rgba(63, 207, 142, 0.1);
}
100% {
background-color: transparent;
}
}
@keyframes slideIn {
0% {
transform: translate3d(0, -100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes marquee {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes marquee-reverse {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0%);
}
}
@keyframes marquee-vertical {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(-100%);
}
}
@keyframes pulse-radar {
0% {
transform: scale(0);
opacity: 0;
}
50% {
opacity: 0.8;
}
100% {
transform: scale(100%);
opacity: 0;
}
}
@layer base {
*,
@@ -62,16 +158,9 @@ body {
-moz-osx-font-smoothing: grayscale;
}
/* h1,
h2,
h3,
h4,
h5,
h6 { */
/*
Typography
*/
* Typography
*/
.h1:not(.prose *):not(.overwrite),
.h2:not(.prose *):not(.overwrite),
.h3:not(.prose *):not(.overwrite),
@@ -271,10 +360,8 @@ table {
}
/*
* sets the image in @Next/Image components
* to respect the height of the content
*
*/
* sets the image in @Next/Image components to respect the height of the content
*/
.next-image--dynamic-fill {
display: block;
width: 100%;
apps/www/tailwind.config.js
-81
View File
@@ -1,81 +0,0 @@
const config = require('config/tailwind.config')
module.exports = config({
content: [
'./_blog/*.mdx',
'./components/**/*.tsx',
'./data/**/*.tsx',
'./layouts/**/*.tsx',
'./lib/mdx/mdxComponents.tsx',
'./pages/**/*.{tsx,mdx}',
'./app/**/*.{tsx,ts,js}',
'./../../packages/ui/src/**/*.{tsx,ts,js}',
'./../../packages/ui-patterns/src/**/*.{tsx,ts,js}',
'./../../packages/marketing/src/**/*.{tsx,ts,js}',
],
theme: {
extend: {
colors: {
'purple-sos': {
100: 'hsl(293 80% 97%)',
200: 'hsl(293 85% 91%)',
300: 'hsl(293 90% 80%)',
400: 'hsl(293 95% 67%)',
500: 'hsl(293 100% 54%)',
600: 'hsl(293 100% 44%)',
700: 'hsl(293 100% 34%)',
800: 'hsl(293 95% 22%)',
900: 'hsl(293 90% 12%)',
},
},
keyframes: {
'flash-code': {
'0%': { backgroundColor: 'rgba(63, 207, 142, 0.1)' },
'100%': { backgroundColor: 'transparent' },
},
slideIn: {
'0%': { transform: 'translate3d(0,-100%,0)' },
'100%': { transform: 'translate3d(0,0,0)' },
},
spinner: {
'0%': {
transform: 'rotate(0deg)',
},
'100%': {
transform: 'rotate(360deg)',
},
},
marquee: {
'0%': { transform: 'translateX(0%)' },
'100%': { transform: 'translateX(-100%)' },
},
'marquee-reverse': {
'0%': { transform: 'translateX(-100%)' },
'100%': { transform: 'translateX(0%)' },
},
'marquee-vertical': {
'0%': { transform: 'translateY(0%)' },
'100%': { transform: 'translateY(-100%)' },
},
'pulse-radar': {
'0%': { transform: 'scale(0)', opacity: 0 },
'50%': { opacity: 0.8 },
'100%': { transform: 'scale(100%)', opacity: 0 },
},
},
animation: {
'flash-code': 'flash-code 1s forwards',
'flash-code-slow': 'flash-code 2s forwards',
spinner: 'spinner 1s both infinite',
marquee: 'marquee 35s linear infinite',
'marquee-vertical': 'marquee-vertical 180s linear infinite both',
'pulse-radar': 'pulse-radar 3s linear infinite',
'slide-in': 'slideIn 250ms ease-in both',
},
transitionDelay: {
1200: '1200ms',
1500: '1500ms',
},
},
},
})
packages/config/tailwind.config.css
+6
View File
@@ -0,0 +1,6 @@
@import 'tailwindcss';
@import '../ui/build/css/source/global.css';
@import '../ui/build/css/themes/dark.css';
@import '../ui/build/css/themes/light.css';
@import './unset-tw-colors.css';
@config './tailwind.config.js';
packages/config/tailwind.config.js
+1 -19
View File
@@ -446,22 +446,4 @@ const uiConfig = ui({
],
})
function arrayMergeFn(destinationArray, sourceArray) {
return destinationArray.concat(sourceArray).reduce((acc, cur) => {
if (acc.includes(cur)) return acc
return [...acc, cur]
}, [])
}
/**
* Merge Supabase UI and Tailwind CSS configurations
* @param {object} tailwindConfig - Tailwind config object
* @return {object} new config object
*/
function wrapper(tailwindConfig) {
return deepMerge({ ...tailwindConfig }, uiConfig, {
arrayMerge: arrayMergeFn,
})
}
module.exports = wrapper
module.exports = uiConfig
packages/config/unset-tw-colors.css
+42
View File
@@ -0,0 +1,42 @@
/*
* This file unsets all built-in Tailwind CSS colors for which we have overrides. Some of them might not exist in
* Tailwind's default theme.
*/
@theme {
--color-amber-*: initial;
--color-amberA-*: initial;
--color-blackA-*: initial;
--color-blue-*: initial;
--color-blueA-*: initial;
--color-crimson-*: initial;
--color-crimsonA-*: initial;
--color-gold-*: initial;
--color-goldA-*: initial;
--color-gray-*: initial;
--color-grayA-*: initial;
--color-green-*: initial;
--color-greenA-*: initial;
--color-indigo-*: initial;
--color-indigoA-*: initial;
--color-orange-*: initial;
--color-orangeA-*: initial;
--color-pink-*: initial;
--color-pinkA-*: initial;
--color-purple-*: initial;
--color-purpleA-*: initial;
--color-red-*: initial;
--color-redA-*: initial;
--color-slate-*: initial;
--color-slateA-*: initial;
--color-tomato-*: initial;
--color-tomatoA-*: initial;
--color-violet-*: initial;
--color-violetA-*: initial;
--color-whiteA-*: initial;
--color-yellow-*: initial;
--color-yellowA-*: initial;
--color-scale-*: initial;
--color-scale-fixed-*: initial;
--color-scaleA-*: initial;
--color-scaleA-fixed-*: initial;
}