mirror of
https://github.com/dsoaress/link-free.git
synced 2026-08-16 22:46:04 +01:00
feat: add base styles
This commit is contained in:
Daniel Soares
13
src/components/Button/index.tsx
Normal file
13
src/components/Button/index.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import { VariantProps } from '@stitches/react'
|
||||
import { ButtonHTMLAttributes, ReactNode } from 'react'
|
||||
|
||||
import { Wrapper } from './styles'
|
||||
|
||||
type ButtonProps = VariantProps<typeof Wrapper> &
|
||||
ButtonHTMLAttributes<HTMLButtonElement> & {
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
export function Button({ children, ...rest }: ButtonProps) {
|
||||
return <Wrapper {...rest}>{children}</Wrapper>
|
||||
}
|
||||
214
src/components/Button/styles.ts
Normal file
214
src/components/Button/styles.ts
Normal file
@@ -0,0 +1,214 @@
|
||||
import { styled, theme } from '../../styles/stitches.config'
|
||||
|
||||
type Color = keyof typeof theme.colors
|
||||
|
||||
const colorVariantFn = (
|
||||
lightColor: Color,
|
||||
regularColor: Color,
|
||||
darkColor: Color,
|
||||
darkerColor: Color
|
||||
) => ({
|
||||
background: theme.colors[regularColor],
|
||||
borderColor: theme.colors[regularColor],
|
||||
color: theme.colors[lightColor],
|
||||
|
||||
'&:hover': {
|
||||
background: theme.colors[darkColor],
|
||||
borderColor: theme.colors[darkColor]
|
||||
},
|
||||
|
||||
'&:active': {
|
||||
background: theme.colors[darkerColor],
|
||||
borderColor: theme.colors[darkerColor]
|
||||
}
|
||||
})
|
||||
|
||||
const outlineVariantFn = (lightColor: Color, regularColor: Color, darkColor: Color) => ({
|
||||
color: theme.colors[darkColor],
|
||||
|
||||
'&:hover': {
|
||||
background: theme.colors[lightColor]
|
||||
},
|
||||
|
||||
'&:active': {
|
||||
background: theme.colors[regularColor]
|
||||
}
|
||||
})
|
||||
|
||||
export const Wrapper = styled('button', {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
height: '3rem',
|
||||
borderWidth: '2.5px',
|
||||
borderStyle: 'solid',
|
||||
fontSize: '1rem',
|
||||
fontWeight: 'bold',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.25s ease-in-out',
|
||||
|
||||
'&:hover': {
|
||||
transform: 'translateY(-0.15rem)'
|
||||
},
|
||||
|
||||
variants: {
|
||||
color: {
|
||||
slate: colorVariantFn('slate50', 'slate600', 'slate700', 'slate800'),
|
||||
gray: colorVariantFn('gray50', 'gray600', 'gray700', 'gray800'),
|
||||
zinc: colorVariantFn('zinc50', 'zinc600', 'zinc700', 'zinc800'),
|
||||
neutral: colorVariantFn('neutral50', 'neutral600', 'neutral700', 'neutral800'),
|
||||
stone: colorVariantFn('stone50', 'stone600', 'stone700', 'stone800'),
|
||||
red: colorVariantFn('red50', 'red600', 'red700', 'red800'),
|
||||
orange: colorVariantFn('orange50', 'orange600', 'orange700', 'orange800'),
|
||||
amber: colorVariantFn('amber50', 'amber600', 'amber700', 'amber800'),
|
||||
yellow: colorVariantFn('yellow50', 'yellow600', 'yellow700', 'yellow800'),
|
||||
lime: colorVariantFn('lime50', 'lime600', 'lime700', 'lime800'),
|
||||
green: colorVariantFn('green50', 'green600', 'green700', 'green800'),
|
||||
emerald: colorVariantFn('emerald50', 'emerald600', 'emerald700', 'emerald800'),
|
||||
teal: colorVariantFn('teal50', 'teal600', 'teal700', 'teal800'),
|
||||
cyan: colorVariantFn('cyan50', 'cyan600', 'cyan700', 'cyan800'),
|
||||
sky: colorVariantFn('sky50', 'sky600', 'sky700', 'sky800'),
|
||||
blue: colorVariantFn('blue50', 'blue600', 'blue700', 'blue800'),
|
||||
indigo: colorVariantFn('indigo50', 'indigo600', 'indigo700', 'indigo800'),
|
||||
violet: colorVariantFn('violet50', 'violet600', 'violet700', 'violet800'),
|
||||
purple: colorVariantFn('purple50', 'purple600', 'purple700', 'purple800'),
|
||||
fuchsia: colorVariantFn('fuchsia50', 'fuchsia600', 'fuchsia700', 'fuchsia800'),
|
||||
pink: colorVariantFn('pink50', 'pink600', 'pink700', 'pink800'),
|
||||
rose: colorVariantFn('rose50', 'rose600', 'rose700', 'rose800')
|
||||
},
|
||||
|
||||
schema: {
|
||||
square: {
|
||||
borderRadius: '0'
|
||||
},
|
||||
rounded: {
|
||||
borderRadius: '0.5rem'
|
||||
},
|
||||
pill: {
|
||||
borderRadius: '9999px'
|
||||
},
|
||||
outline: {
|
||||
background: 'transparent'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
compoundVariants: [
|
||||
{
|
||||
color: 'slate',
|
||||
schema: 'outline',
|
||||
css: outlineVariantFn('slate50', 'slate100', 'slate600')
|
||||
},
|
||||
{
|
||||
color: 'gray',
|
||||
schema: 'outline',
|
||||
css: outlineVariantFn('gray50', 'gray100', 'gray600')
|
||||
},
|
||||
{
|
||||
color: 'zinc',
|
||||
schema: 'outline',
|
||||
css: outlineVariantFn('zinc50', 'zinc100', 'zinc600')
|
||||
},
|
||||
{
|
||||
color: 'neutral',
|
||||
schema: 'outline',
|
||||
css: outlineVariantFn('neutral50', 'neutral100', 'neutral600')
|
||||
},
|
||||
{
|
||||
color: 'stone',
|
||||
schema: 'outline',
|
||||
css: outlineVariantFn('stone50', 'stone100', 'stone600')
|
||||
},
|
||||
{
|
||||
color: 'red',
|
||||
schema: 'outline',
|
||||
css: outlineVariantFn('red50', 'red100', 'red600')
|
||||
},
|
||||
{
|
||||
color: 'orange',
|
||||
schema: 'outline',
|
||||
css: outlineVariantFn('orange50', 'orange100', 'orange600')
|
||||
},
|
||||
{
|
||||
color: 'amber',
|
||||
schema: 'outline',
|
||||
css: outlineVariantFn('amber50', 'amber100', 'amber600')
|
||||
},
|
||||
{
|
||||
color: 'yellow',
|
||||
schema: 'outline',
|
||||
css: outlineVariantFn('yellow50', 'yellow100', 'yellow600')
|
||||
},
|
||||
{
|
||||
color: 'lime',
|
||||
schema: 'outline',
|
||||
css: outlineVariantFn('lime50', 'lime100', 'lime600')
|
||||
},
|
||||
{
|
||||
color: 'green',
|
||||
schema: 'outline',
|
||||
css: outlineVariantFn('green50', 'green100', 'green600')
|
||||
},
|
||||
{
|
||||
color: 'emerald',
|
||||
schema: 'outline',
|
||||
css: outlineVariantFn('emerald50', 'emerald100', 'emerald600')
|
||||
},
|
||||
{
|
||||
color: 'teal',
|
||||
schema: 'outline',
|
||||
css: outlineVariantFn('teal50', 'teal100', 'teal600')
|
||||
},
|
||||
{
|
||||
color: 'cyan',
|
||||
schema: 'outline',
|
||||
css: outlineVariantFn('cyan50', 'cyan100', 'cyan600')
|
||||
},
|
||||
{
|
||||
color: 'sky',
|
||||
schema: 'outline',
|
||||
css: outlineVariantFn('sky50', 'sky100', 'sky600')
|
||||
},
|
||||
{
|
||||
color: 'blue',
|
||||
schema: 'outline',
|
||||
css: outlineVariantFn('blue50', 'blue100', 'blue600')
|
||||
},
|
||||
{
|
||||
color: 'indigo',
|
||||
schema: 'outline',
|
||||
css: outlineVariantFn('indigo50', 'indigo100', 'indigo600')
|
||||
},
|
||||
{
|
||||
color: 'violet',
|
||||
schema: 'outline',
|
||||
css: outlineVariantFn('violet50', 'violet100', 'violet600')
|
||||
},
|
||||
{
|
||||
color: 'purple',
|
||||
schema: 'outline',
|
||||
css: outlineVariantFn('purple50', 'purple100', 'purple600')
|
||||
},
|
||||
{
|
||||
color: 'fuchsia',
|
||||
schema: 'outline',
|
||||
css: outlineVariantFn('fuchsia50', 'fuchsia100', 'fuchsia600')
|
||||
},
|
||||
{
|
||||
color: 'pink',
|
||||
schema: 'outline',
|
||||
css: outlineVariantFn('pink50', 'pink100', 'pink600')
|
||||
},
|
||||
{
|
||||
color: 'rose',
|
||||
schema: 'outline',
|
||||
css: outlineVariantFn('rose50', 'rose100', 'rose600')
|
||||
}
|
||||
],
|
||||
|
||||
defaultVariants: {
|
||||
color: 'teal',
|
||||
schema: 'outline'
|
||||
}
|
||||
})
|
||||
@@ -1,7 +1,31 @@
|
||||
import { Button } from '../components/Button'
|
||||
|
||||
export default function Home() {
|
||||
const links = [
|
||||
{
|
||||
label: 'Home',
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
label: 'About',
|
||||
href: '/about'
|
||||
},
|
||||
{
|
||||
label: 'Contact',
|
||||
href: '/contact'
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Hello</h1>
|
||||
{links.map(link => (
|
||||
<>
|
||||
<Button color="sky" schema="square" key={link.href}>
|
||||
{link.label}
|
||||
</Button>
|
||||
<br />
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,5 +1,249 @@
|
||||
import { createStitches } from '@stitches/react'
|
||||
|
||||
export const { css, styled, globalCss, theme, keyframes, getCssText } = createStitches({
|
||||
theme: {}
|
||||
theme: {
|
||||
colors: {
|
||||
slate50: '#f8fafc',
|
||||
slate100: '#f1f5f9',
|
||||
slate200: '#e2e8f0',
|
||||
slate300: '#cbd5e1',
|
||||
slate400: '#94a3b8',
|
||||
slate500: '#64748b',
|
||||
slate600: '#475569',
|
||||
slate700: '#334155',
|
||||
slate800: '#1e293b',
|
||||
slate900: '#0f172a',
|
||||
|
||||
gray50: '#f9fafb',
|
||||
gray100: '#f3f4f6',
|
||||
gray200: '#e5e7eb',
|
||||
gray300: '#d1d5db',
|
||||
gray400: '#9ca3af',
|
||||
gray500: '#6b7280',
|
||||
gray600: '#4b5563',
|
||||
gray700: '#374151',
|
||||
gray800: '#1f2937',
|
||||
gray900: '#111827',
|
||||
|
||||
zinc50: '#fafafa',
|
||||
zinc100: '#f4f4f5',
|
||||
zinc200: '#e4e4e7',
|
||||
zinc300: '#d4d4d8',
|
||||
zinc400: '#a1a1aa',
|
||||
zinc500: '#71717a',
|
||||
zinc600: '#52525b',
|
||||
zinc700: '#3f3f46',
|
||||
zinc800: '#27272a',
|
||||
zinc900: '#18181b',
|
||||
|
||||
neutral50: '#fafafa',
|
||||
neutral100: '#f5f5f5',
|
||||
neutral200: '#e5e5e5',
|
||||
neutral300: '#d4d4d4',
|
||||
neutral400: '#a3a3a3',
|
||||
neutral500: '#737373',
|
||||
neutral600: '#525252',
|
||||
neutral700: '#404040',
|
||||
neutral800: '#262626',
|
||||
neutral900: '#171717',
|
||||
|
||||
stone50: '#fafaf9',
|
||||
stone100: '#f5f5f4',
|
||||
stone200: '#e7e5e4',
|
||||
stone300: '#d6d3d1',
|
||||
stone400: '#a8a29e',
|
||||
stone500: '#78716c',
|
||||
stone600: '#57534e',
|
||||
stone700: '#44403c',
|
||||
stone800: '#292524',
|
||||
stone900: '#1c1917',
|
||||
|
||||
red50: '#fef2f2',
|
||||
red100: '#fee2e2',
|
||||
red200: '#fecaca',
|
||||
red300: '#fca5a5',
|
||||
red400: '#f87171',
|
||||
red500: '#ef4444',
|
||||
red600: '#dc2626',
|
||||
red700: '#b91c1c',
|
||||
red800: '#991b1b',
|
||||
red900: '#7f1d1d',
|
||||
|
||||
orange50: '#fff7ed',
|
||||
orange100: '#ffedd5',
|
||||
orange200: '#fed7aa',
|
||||
orange300: '#fdba74',
|
||||
orange400: '#fb923c',
|
||||
orange500: '#f97316',
|
||||
orange600: '#ea580c',
|
||||
orange700: '#c2410c',
|
||||
orange800: '#9a3412',
|
||||
orange900: '#7c2d12',
|
||||
|
||||
amber50: '#fffbeb',
|
||||
amber100: '#fef3c7',
|
||||
amber200: '#fde68a',
|
||||
amber300: '#fcd34d',
|
||||
amber400: '#fbbf24',
|
||||
amber500: '#f59e0b',
|
||||
amber600: '#d97706',
|
||||
amber700: '#b45309',
|
||||
amber800: '#92400e',
|
||||
amber900: '#78350f',
|
||||
|
||||
yellow50: '#fefce8',
|
||||
yellow100: '#fef9c3',
|
||||
yellow200: '#fef08a',
|
||||
yellow300: '#fde047',
|
||||
yellow400: '#facc15',
|
||||
yellow500: '#eab308',
|
||||
yellow600: '#ca8a04',
|
||||
yellow700: '#a16207',
|
||||
yellow800: '#854d0e',
|
||||
yellow900: '#713f12',
|
||||
|
||||
lime50: '#f7fee7',
|
||||
lime100: '#ecfccb',
|
||||
lime200: '#d9f99d',
|
||||
lime300: '#bef264',
|
||||
lime400: '#a3e635',
|
||||
lime500: '#84cc16',
|
||||
lime600: '#65a30d',
|
||||
lime700: '#4d7c0f',
|
||||
lime800: '#3f6212',
|
||||
lime900: '#365314',
|
||||
|
||||
green50: '#f0fdf4',
|
||||
green100: '#dcfce7',
|
||||
green200: '#bbf7d0',
|
||||
green300: '#86efac',
|
||||
green400: '#4ade80',
|
||||
green500: '#22c55e',
|
||||
green600: '#16a34a',
|
||||
green700: '#15803d',
|
||||
green800: '#166534',
|
||||
green900: '#14532d',
|
||||
|
||||
emerald50: '#ecfdf5',
|
||||
emerald100: '#d1fae5',
|
||||
emerald200: '#a7f3d0',
|
||||
emerald300: '#6ee7b7',
|
||||
emerald400: '#34d399',
|
||||
emerald500: '#10b981',
|
||||
emerald600: '#059669',
|
||||
emerald700: '#047857',
|
||||
emerald800: '#065f46',
|
||||
emerald900: '#064e3b',
|
||||
|
||||
teal50: '#f0fdfa',
|
||||
teal100: '#ccfbf1',
|
||||
teal200: '#99f6e4',
|
||||
teal300: '#5eead4',
|
||||
teal400: '#2dd4bf',
|
||||
teal500: '#14b8a6',
|
||||
teal600: '#0d9488',
|
||||
teal700: '#0f766e',
|
||||
teal800: '#115e59',
|
||||
teal900: '#134e4a',
|
||||
|
||||
cyan50: '#ecfeff',
|
||||
cyan100: '#cffafe',
|
||||
cyan200: '#a5f3fc',
|
||||
cyan300: '#67e8f9',
|
||||
cyan400: '#22d3ee',
|
||||
cyan500: '#06b6d4',
|
||||
cyan600: '#0891b2',
|
||||
cyan700: '#0e7490',
|
||||
cyan800: '#155e75',
|
||||
cyan900: '#164e63',
|
||||
|
||||
sky50: '#f0f9ff',
|
||||
sky100: '#e0f2fe',
|
||||
sky200: '#bae6fd',
|
||||
sky300: '#7dd3fc',
|
||||
sky400: '#38bdf8',
|
||||
sky500: '#0ea5e9',
|
||||
sky600: '#0284c7',
|
||||
sky700: '#0369a1',
|
||||
sky800: '#075985',
|
||||
sky900: '#0c4a6e',
|
||||
|
||||
blue50: '#eff6ff',
|
||||
blue100: '#dbeafe',
|
||||
blue200: '#bfdbfe',
|
||||
blue300: '#93c5fd',
|
||||
blue400: '#60a5fa',
|
||||
blue500: '#3b82f6',
|
||||
blue600: '#2563eb',
|
||||
blue700: '#1d4ed8',
|
||||
blue800: '#1e40af',
|
||||
blue900: '#1e3a8a',
|
||||
|
||||
indigo50: '#eef2ff',
|
||||
indigo100: '#e0e7ff',
|
||||
indigo200: '#c7d2fe',
|
||||
indigo300: '#a5b4fc',
|
||||
indigo400: '#818cf8',
|
||||
indigo500: '#6366f1',
|
||||
indigo600: '#4f46e5',
|
||||
indigo700: '#4338ca',
|
||||
indigo800: '#3730a3',
|
||||
indigo900: '#312e81',
|
||||
|
||||
violet50: '#f5f3ff',
|
||||
violet100: '#ede9fe',
|
||||
violet200: '#ddd6fe',
|
||||
violet300: '#c4b5fd',
|
||||
violet400: '#a78bfa',
|
||||
violet500: '#8b5cf6',
|
||||
violet600: '#7c3aed',
|
||||
violet700: '#6d28d9',
|
||||
violet800: '#5b21b6',
|
||||
violet900: '#4c1d95',
|
||||
|
||||
purple50: '#faf5ff',
|
||||
purple100: '#f3e8ff',
|
||||
purple200: '#e9d5ff',
|
||||
purple300: '#d8b4fe',
|
||||
purple400: '#c084fc',
|
||||
purple500: '#a855f7',
|
||||
purple600: '#9333ea',
|
||||
purple700: '#7e22ce',
|
||||
purple800: '#6b21a8',
|
||||
purple900: '#581c87',
|
||||
|
||||
fuchsia50: '#fdf4ff',
|
||||
fuchsia100: '#fae8ff',
|
||||
fuchsia200: '#f5d0fe',
|
||||
fuchsia300: '#f0abfc',
|
||||
fuchsia400: '#e879f9',
|
||||
fuchsia500: '#d946ef',
|
||||
fuchsia600: '#c026d3',
|
||||
fuchsia700: '#a21caf',
|
||||
fuchsia800: '#86198f',
|
||||
fuchsia900: '#701a75',
|
||||
|
||||
pink50: '#fdf2f8',
|
||||
pink100: '#fce7f3',
|
||||
pink200: '#fbcfe8',
|
||||
pink300: '#f9a8d4',
|
||||
pink400: '#f472b6',
|
||||
pink500: '#ec4899',
|
||||
pink600: '#db2777',
|
||||
pink700: '#be185d',
|
||||
pink800: '#9d174d',
|
||||
pink900: '#831843',
|
||||
|
||||
rose50: '#fff1f2',
|
||||
rose100: '#ffe4e6',
|
||||
rose200: '#fecdd3',
|
||||
rose300: '#fda4af',
|
||||
rose400: '#fb7185',
|
||||
rose500: '#f43f5e',
|
||||
rose600: '#e11d48',
|
||||
rose700: '#be123c',
|
||||
rose800: '#9f1239',
|
||||
rose900: '#881337'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user