mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 21:05:06 +03:00
b91532f6c7
* migrate some www components to tokens * consolidate InteractiveShimmerCard to Panel component * update tokens in blog * update tokens in careers page * update tokens in customers section * update tokens in open-source section * update tokens in Realtime page * update tokens in Storage and Vector * update tokens in SplitCodeBlockCarousel * update tokens in PGCharts * remove unused css files * update tokens in Card * update tokens in Pricing page * clean up priving page imports * remove hardcoded theme vars * migrate first half of defaultTheme.ts to tokens * migrate second half of defaultTheme.ts to tokens * improve inputs * add foreground to text-light and text-lighter * add foreground to text-light and text-lighter * migrate docs components with styling tokens * migrate docs components with styling tokens * fix broken Repos component * fix broken classes in blog * update tokens on Button and other components * update tokens on IconPanel * update studio main layout base styling tokens * update tokens across studio, docs and www * update tokens across studio, docs and www * update ui/Panel to styling tokens * update ExampleProject and TableEditorMenu tokens * www vector page tokens * update studio UI tokens * update other studio UI tokens * update more studio UI tokens * change tokens here, change tokens there * finish updating colors with tokens variables * add gui sandbox for theme experimentation * use common package for www, docs and studio and fix Command K tokens * provide light mode default tokens options * fix conflict leftover * update loading line * fix className typo * fix prettier * update themeSandbox preset default values * fix text-background0 * prettier * update warningBanner with warning color * switch all border-border with border-default * improve border-secondary and foreground-muted in light mode * force ring color on toggle * fix button bg color and border-muted light token * fix input bg color * fix dark button hover * fix homepage product card * fix code-hike table header colors * button dark border * remove tabIndex leftover from homepage main ctas --------- Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com> Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
import { VariantProps, cva } from 'class-variance-authority'
|
|
|
|
const defaults = {
|
|
bg: {
|
|
brand: {
|
|
primary: 'bg-purple-600',
|
|
secondary: 'bg-purple-200',
|
|
},
|
|
},
|
|
text: {
|
|
brand: 'text-purple-600',
|
|
body: 'text-background',
|
|
title: 'text-alternative',
|
|
},
|
|
border: {
|
|
brand: 'border-brand-600',
|
|
primary: 'border-strong',
|
|
secondary: 'border-secondary',
|
|
alternative: 'border-alternative',
|
|
},
|
|
placeholder: 'placeholder-border-stronger',
|
|
focus: `
|
|
outline-none
|
|
focus:ring-current focus:ring-2
|
|
`,
|
|
'focus-visible': `
|
|
outline-none
|
|
transition-all
|
|
outline-0
|
|
focus-visible:outline-4
|
|
focus-visible:outline-offset-1
|
|
`,
|
|
size: {
|
|
// buttons, inputs, input labels use these sizes
|
|
text: {
|
|
tiny: 'text-xs',
|
|
small: 'text-sm leading-4',
|
|
medium: 'text-sm',
|
|
large: 'text-base',
|
|
xlarge: 'text-base',
|
|
},
|
|
// buttons, inputs, input labels use these sizes
|
|
padding: {
|
|
tiny: 'px-2.5 py-1',
|
|
small: 'px-3 py-2',
|
|
medium: 'px-4 py-2',
|
|
large: 'px-4 py-2',
|
|
xlarge: 'px-6 py-3',
|
|
},
|
|
},
|
|
overlay: {
|
|
base: `absolute inset-0 bg-background opacity-50`,
|
|
container: `fixed inset-0 transition-opacity`,
|
|
},
|
|
}
|
|
|
|
export const sizes = {
|
|
tiny: `${defaults.size.text.tiny} ${defaults.size.padding.tiny}`,
|
|
small: `${defaults.size.text.small} ${defaults.size.padding.small}`,
|
|
medium: `${defaults.size.text.medium} ${defaults.size.padding.medium}`,
|
|
large: `${defaults.size.text.large} ${defaults.size.padding.large}`,
|
|
xlarge: `${defaults.size.text.xlarge} ${defaults.size.padding.xlarge}`,
|
|
}
|
|
export type SizeVariantProps = VariantProps<typeof sizeVariants>['size']
|
|
export const sizeVariants = cva('', {
|
|
variants: {
|
|
size: {
|
|
...sizes,
|
|
},
|
|
},
|
|
})
|