Run prettier through everything.
This commit is contained in:
muzam1l
@@ -1,6 +1,6 @@
|
||||
// stitches.config.ts
|
||||
import type Stitches from "@stitches/react";
|
||||
import { createStitches } from "@stitches/react";
|
||||
import type Stitches from '@stitches/react'
|
||||
import { createStitches } from '@stitches/react'
|
||||
|
||||
import {
|
||||
gray,
|
||||
@@ -24,335 +24,285 @@ import {
|
||||
purpleDark,
|
||||
greenDark,
|
||||
red,
|
||||
redDark,
|
||||
} from "@radix-ui/colors";
|
||||
redDark
|
||||
} from '@radix-ui/colors'
|
||||
|
||||
export const {
|
||||
styled,
|
||||
css,
|
||||
globalCss,
|
||||
keyframes,
|
||||
getCssText,
|
||||
theme,
|
||||
createTheme,
|
||||
config,
|
||||
} = createStitches({
|
||||
theme: {
|
||||
colors: {
|
||||
...gray,
|
||||
...blue,
|
||||
...crimson,
|
||||
...grass,
|
||||
...slate,
|
||||
...mauve,
|
||||
...mauveA,
|
||||
...amber,
|
||||
...purple,
|
||||
...green,
|
||||
...red,
|
||||
accent: "#9D2DFF",
|
||||
background: "$gray1",
|
||||
backgroundAlt: "$gray4",
|
||||
backgroundOverlay: "$mauve2",
|
||||
text: "$gray12",
|
||||
textMuted: "$gray10",
|
||||
primary: "$plum",
|
||||
error: '$red9',
|
||||
warning: '$amber11',
|
||||
success: "$grass11",
|
||||
white: "white",
|
||||
black: "black",
|
||||
deep: "rgb(244, 244, 244)",
|
||||
export const { styled, css, globalCss, keyframes, getCssText, theme, createTheme, config } =
|
||||
createStitches({
|
||||
theme: {
|
||||
colors: {
|
||||
...gray,
|
||||
...blue,
|
||||
...crimson,
|
||||
...grass,
|
||||
...slate,
|
||||
...mauve,
|
||||
...mauveA,
|
||||
...amber,
|
||||
...purple,
|
||||
...green,
|
||||
...red,
|
||||
accent: '#9D2DFF',
|
||||
background: '$gray1',
|
||||
backgroundAlt: '$gray4',
|
||||
backgroundOverlay: '$mauve2',
|
||||
text: '$gray12',
|
||||
textMuted: '$gray10',
|
||||
primary: '$plum',
|
||||
error: '$red9',
|
||||
warning: '$amber11',
|
||||
success: '$grass11',
|
||||
white: 'white',
|
||||
black: 'black',
|
||||
deep: 'rgb(244, 244, 244)'
|
||||
},
|
||||
fonts: {
|
||||
body: 'Work Sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
|
||||
heading: 'Work Sans, sans-serif',
|
||||
monospace: 'Roboto Mono, monospace'
|
||||
},
|
||||
fontSizes: {
|
||||
xs: '0.6875rem',
|
||||
sm: '0.875rem',
|
||||
md: '1rem',
|
||||
lg: '1.125rem',
|
||||
xl: '1.25rem',
|
||||
'2xl': '1.5rem',
|
||||
'3xl': '1.875rem',
|
||||
'4xl': '2.25rem',
|
||||
'5xl': '3rem',
|
||||
'6xl': '3.75rem',
|
||||
'7xl': '4.5rem',
|
||||
'8xl': '6rem',
|
||||
'9xl': '8rem',
|
||||
default: '$md'
|
||||
},
|
||||
space: {
|
||||
px: '1px',
|
||||
0.5: '0.125rem',
|
||||
1: '0.25rem',
|
||||
1.5: '0.375rem',
|
||||
2: '0.5rem',
|
||||
2.5: '0.625rem',
|
||||
3: '0.75rem',
|
||||
3.5: '0.875rem',
|
||||
4: '1rem',
|
||||
5: '1.25rem',
|
||||
6: '1.5rem',
|
||||
7: '1.75rem',
|
||||
8: '2rem',
|
||||
9: '2.25rem',
|
||||
10: '2.5rem',
|
||||
12: '3rem',
|
||||
14: '3.5rem',
|
||||
16: '4rem',
|
||||
20: '5rem',
|
||||
24: '6rem',
|
||||
28: '7rem',
|
||||
32: '8rem',
|
||||
36: '9rem',
|
||||
40: '10rem',
|
||||
44: '11rem',
|
||||
48: '12rem',
|
||||
52: '13rem',
|
||||
56: '14rem',
|
||||
60: '15rem',
|
||||
64: '16rem',
|
||||
72: '18rem',
|
||||
80: '20rem',
|
||||
96: '24rem',
|
||||
widePlus: '2048px',
|
||||
wide: '1536px',
|
||||
layoutPlus: '1260px',
|
||||
layout: '1024px',
|
||||
copyUltra: '980px',
|
||||
copyPlus: '768px',
|
||||
copy: '680px',
|
||||
narrowPlus: '600px',
|
||||
narrow: '512px',
|
||||
xs: '20rem',
|
||||
sm: '24rem',
|
||||
md: '28rem',
|
||||
lg: '32rem',
|
||||
xl: '36rem',
|
||||
'2xl': '42rem',
|
||||
'3xl': '48rem',
|
||||
'4xl': '56rem',
|
||||
'5xl': '64rem',
|
||||
'6xl': '72rem',
|
||||
'7xl': '80rem',
|
||||
'8xl': '90rem'
|
||||
},
|
||||
sizes: {
|
||||
px: '1px',
|
||||
0.5: '0.125rem',
|
||||
1: '0.25rem',
|
||||
1.5: '0.375rem',
|
||||
2: '0.5rem',
|
||||
2.5: '0.625rem',
|
||||
3: '0.75rem',
|
||||
3.5: '0.875rem',
|
||||
4: '1rem',
|
||||
5: '1.25rem',
|
||||
6: '1.5rem',
|
||||
7: '1.75rem',
|
||||
8: '2rem',
|
||||
9: '2.25rem',
|
||||
10: '2.5rem',
|
||||
12: '3rem',
|
||||
14: '3.5rem',
|
||||
16: '4rem',
|
||||
20: '5rem',
|
||||
24: '6rem',
|
||||
28: '7rem',
|
||||
32: '8rem',
|
||||
36: '9rem',
|
||||
40: '10rem',
|
||||
44: '11rem',
|
||||
48: '12rem',
|
||||
52: '13rem',
|
||||
56: '14rem',
|
||||
60: '15rem',
|
||||
64: '16rem',
|
||||
72: '18rem',
|
||||
80: '20rem',
|
||||
96: '24rem',
|
||||
max: 'max-content',
|
||||
min: 'min-content',
|
||||
full: '100%',
|
||||
'3xs': '14rem',
|
||||
'2xs': '16rem',
|
||||
xs: '20rem',
|
||||
sm: '24rem',
|
||||
md: '28rem',
|
||||
lg: '32rem',
|
||||
xl: '36rem',
|
||||
'2xl': '42rem',
|
||||
'3xl': '48rem',
|
||||
'4xl': '56rem',
|
||||
'5xl': '64rem',
|
||||
'6xl': '72rem',
|
||||
'7xl': '80rem',
|
||||
'8xl': '90rem'
|
||||
},
|
||||
radii: {
|
||||
none: '0',
|
||||
sm: '0.2rem',
|
||||
base: '0.25rem',
|
||||
md: '0.375rem',
|
||||
lg: '0.5rem',
|
||||
xl: '0.75rem',
|
||||
'2xl': '1rem',
|
||||
'3xl': '1.5rem',
|
||||
full: '9999px'
|
||||
},
|
||||
fontWeights: {
|
||||
body: 400,
|
||||
heading: 700,
|
||||
bold: 700
|
||||
},
|
||||
lineHeights: {
|
||||
one: 1,
|
||||
body: 1.5,
|
||||
heading: 0.85
|
||||
},
|
||||
letterSpacings: {},
|
||||
borderWidths: {},
|
||||
borderStyles: {},
|
||||
shadows: {},
|
||||
zIndices: {},
|
||||
transitions: {}
|
||||
},
|
||||
fonts: {
|
||||
body: 'Work Sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
|
||||
heading: "Work Sans, sans-serif",
|
||||
monospace: "Roboto Mono, monospace",
|
||||
media: {
|
||||
sm: '(min-width: 30em)',
|
||||
md: '(min-width: 48em)',
|
||||
lg: '(min-width: 62em)',
|
||||
xl: '(min-width: 80em)',
|
||||
'2xl': '(min-width: 96em)',
|
||||
hover: '(any-hover: hover)',
|
||||
dark: '(prefers-color-scheme: dark)',
|
||||
light: '(prefers-color-scheme: light)'
|
||||
},
|
||||
fontSizes: {
|
||||
xs: "0.6875rem",
|
||||
sm: "0.875rem",
|
||||
md: "1rem",
|
||||
lg: "1.125rem",
|
||||
xl: "1.25rem",
|
||||
"2xl": "1.5rem",
|
||||
"3xl": "1.875rem",
|
||||
"4xl": "2.25rem",
|
||||
"5xl": "3rem",
|
||||
"6xl": "3.75rem",
|
||||
"7xl": "4.5rem",
|
||||
"8xl": "6rem",
|
||||
"9xl": "8rem",
|
||||
default: "$md",
|
||||
},
|
||||
space: {
|
||||
px: "1px",
|
||||
0.5: "0.125rem",
|
||||
1: "0.25rem",
|
||||
1.5: "0.375rem",
|
||||
2: "0.5rem",
|
||||
2.5: "0.625rem",
|
||||
3: "0.75rem",
|
||||
3.5: "0.875rem",
|
||||
4: "1rem",
|
||||
5: "1.25rem",
|
||||
6: "1.5rem",
|
||||
7: "1.75rem",
|
||||
8: "2rem",
|
||||
9: "2.25rem",
|
||||
10: "2.5rem",
|
||||
12: "3rem",
|
||||
14: "3.5rem",
|
||||
16: "4rem",
|
||||
20: "5rem",
|
||||
24: "6rem",
|
||||
28: "7rem",
|
||||
32: "8rem",
|
||||
36: "9rem",
|
||||
40: "10rem",
|
||||
44: "11rem",
|
||||
48: "12rem",
|
||||
52: "13rem",
|
||||
56: "14rem",
|
||||
60: "15rem",
|
||||
64: "16rem",
|
||||
72: "18rem",
|
||||
80: "20rem",
|
||||
96: "24rem",
|
||||
widePlus: "2048px",
|
||||
wide: "1536px",
|
||||
layoutPlus: "1260px",
|
||||
layout: "1024px",
|
||||
copyUltra: "980px",
|
||||
copyPlus: "768px",
|
||||
copy: "680px",
|
||||
narrowPlus: "600px",
|
||||
narrow: "512px",
|
||||
xs: "20rem",
|
||||
sm: "24rem",
|
||||
md: "28rem",
|
||||
lg: "32rem",
|
||||
xl: "36rem",
|
||||
"2xl": "42rem",
|
||||
"3xl": "48rem",
|
||||
"4xl": "56rem",
|
||||
"5xl": "64rem",
|
||||
"6xl": "72rem",
|
||||
"7xl": "80rem",
|
||||
"8xl": "90rem",
|
||||
},
|
||||
sizes: {
|
||||
px: "1px",
|
||||
0.5: "0.125rem",
|
||||
1: "0.25rem",
|
||||
1.5: "0.375rem",
|
||||
2: "0.5rem",
|
||||
2.5: "0.625rem",
|
||||
3: "0.75rem",
|
||||
3.5: "0.875rem",
|
||||
4: "1rem",
|
||||
5: "1.25rem",
|
||||
6: "1.5rem",
|
||||
7: "1.75rem",
|
||||
8: "2rem",
|
||||
9: "2.25rem",
|
||||
10: "2.5rem",
|
||||
12: "3rem",
|
||||
14: "3.5rem",
|
||||
16: "4rem",
|
||||
20: "5rem",
|
||||
24: "6rem",
|
||||
28: "7rem",
|
||||
32: "8rem",
|
||||
36: "9rem",
|
||||
40: "10rem",
|
||||
44: "11rem",
|
||||
48: "12rem",
|
||||
52: "13rem",
|
||||
56: "14rem",
|
||||
60: "15rem",
|
||||
64: "16rem",
|
||||
72: "18rem",
|
||||
80: "20rem",
|
||||
96: "24rem",
|
||||
max: "max-content",
|
||||
min: "min-content",
|
||||
full: "100%",
|
||||
"3xs": "14rem",
|
||||
"2xs": "16rem",
|
||||
xs: "20rem",
|
||||
sm: "24rem",
|
||||
md: "28rem",
|
||||
lg: "32rem",
|
||||
xl: "36rem",
|
||||
"2xl": "42rem",
|
||||
"3xl": "48rem",
|
||||
"4xl": "56rem",
|
||||
"5xl": "64rem",
|
||||
"6xl": "72rem",
|
||||
"7xl": "80rem",
|
||||
"8xl": "90rem",
|
||||
},
|
||||
radii: {
|
||||
none: "0",
|
||||
sm: "0.2rem",
|
||||
base: "0.25rem",
|
||||
md: "0.375rem",
|
||||
lg: "0.5rem",
|
||||
xl: "0.75rem",
|
||||
"2xl": "1rem",
|
||||
"3xl": "1.5rem",
|
||||
full: "9999px",
|
||||
},
|
||||
fontWeights: {
|
||||
body: 400,
|
||||
heading: 700,
|
||||
bold: 700,
|
||||
},
|
||||
lineHeights: {
|
||||
one: 1,
|
||||
body: 1.5,
|
||||
heading: 0.85,
|
||||
},
|
||||
letterSpacings: {},
|
||||
borderWidths: {},
|
||||
borderStyles: {},
|
||||
shadows: {},
|
||||
zIndices: {},
|
||||
transitions: {},
|
||||
},
|
||||
media: {
|
||||
sm: "(min-width: 30em)",
|
||||
md: "(min-width: 48em)",
|
||||
lg: "(min-width: 62em)",
|
||||
xl: "(min-width: 80em)",
|
||||
"2xl": "(min-width: 96em)",
|
||||
hover: "(any-hover: hover)",
|
||||
dark: "(prefers-color-scheme: dark)",
|
||||
light: "(prefers-color-scheme: light)",
|
||||
},
|
||||
utils: {
|
||||
// Abbreviated margin properties
|
||||
m: (
|
||||
value: Stitches.ScaleValue<"space"> | Stitches.PropertyValue<"margin">
|
||||
) => ({
|
||||
margin: value,
|
||||
}),
|
||||
mt: (
|
||||
value: Stitches.ScaleValue<"space"> | Stitches.PropertyValue<"marginTop">
|
||||
) => ({
|
||||
marginTop: value,
|
||||
}),
|
||||
mr: (
|
||||
value:
|
||||
| Stitches.ScaleValue<"space">
|
||||
| Stitches.PropertyValue<"marginRight">
|
||||
) => ({
|
||||
marginRight: value,
|
||||
}),
|
||||
mb: (
|
||||
value:
|
||||
| Stitches.ScaleValue<"space">
|
||||
| Stitches.PropertyValue<"marginBottom">
|
||||
) => ({
|
||||
marginBottom: value,
|
||||
}),
|
||||
ml: (
|
||||
value: Stitches.ScaleValue<"space"> | Stitches.PropertyValue<"marginLeft">
|
||||
) => ({
|
||||
marginLeft: value,
|
||||
}),
|
||||
mx: (
|
||||
value:
|
||||
| Stitches.ScaleValue<"space">
|
||||
| Stitches.PropertyValue<"marginLeft" | "marginRight">
|
||||
) => ({
|
||||
marginLeft: value,
|
||||
marginRight: value,
|
||||
}),
|
||||
my: (
|
||||
value:
|
||||
| Stitches.ScaleValue<"space">
|
||||
| Stitches.PropertyValue<"marginTop" | "marginBottom">
|
||||
) => ({
|
||||
marginTop: value,
|
||||
marginBottom: value,
|
||||
}),
|
||||
// Abbreviated margin properties
|
||||
p: (
|
||||
value: Stitches.ScaleValue<"space"> | Stitches.PropertyValue<"padding">
|
||||
) => ({
|
||||
padding: value,
|
||||
}),
|
||||
pt: (
|
||||
value: Stitches.ScaleValue<"space"> | Stitches.PropertyValue<"paddingTop">
|
||||
) => ({
|
||||
paddingTop: value,
|
||||
}),
|
||||
pr: (
|
||||
value:
|
||||
| Stitches.ScaleValue<"space">
|
||||
| Stitches.PropertyValue<"paddingRight">
|
||||
) => ({
|
||||
paddingRight: value,
|
||||
}),
|
||||
pb: (
|
||||
value:
|
||||
| Stitches.ScaleValue<"space">
|
||||
| Stitches.PropertyValue<"paddingBottom">
|
||||
) => ({
|
||||
paddingBottom: value,
|
||||
}),
|
||||
pl: (
|
||||
value:
|
||||
| Stitches.ScaleValue<"space">
|
||||
| Stitches.PropertyValue<"paddingLeft">
|
||||
) => ({
|
||||
paddingLeft: value,
|
||||
}),
|
||||
px: (
|
||||
value:
|
||||
| Stitches.ScaleValue<"space">
|
||||
| Stitches.PropertyValue<"paddingLeft" | "paddingRight">
|
||||
) => ({
|
||||
paddingLeft: value,
|
||||
paddingRight: value,
|
||||
}),
|
||||
py: (
|
||||
value:
|
||||
| Stitches.ScaleValue<"space">
|
||||
| Stitches.PropertyValue<"paddingTop" | "paddingBottom">
|
||||
) => ({
|
||||
paddingTop: value,
|
||||
paddingBottom: value,
|
||||
}),
|
||||
utils: {
|
||||
// Abbreviated margin properties
|
||||
m: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'margin'>) => ({
|
||||
margin: value
|
||||
}),
|
||||
mt: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginTop'>) => ({
|
||||
marginTop: value
|
||||
}),
|
||||
mr: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginRight'>) => ({
|
||||
marginRight: value
|
||||
}),
|
||||
mb: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginBottom'>) => ({
|
||||
marginBottom: value
|
||||
}),
|
||||
ml: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginLeft'>) => ({
|
||||
marginLeft: value
|
||||
}),
|
||||
mx: (
|
||||
value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginLeft' | 'marginRight'>
|
||||
) => ({
|
||||
marginLeft: value,
|
||||
marginRight: value
|
||||
}),
|
||||
my: (
|
||||
value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginTop' | 'marginBottom'>
|
||||
) => ({
|
||||
marginTop: value,
|
||||
marginBottom: value
|
||||
}),
|
||||
// Abbreviated margin properties
|
||||
p: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'padding'>) => ({
|
||||
padding: value
|
||||
}),
|
||||
pt: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingTop'>) => ({
|
||||
paddingTop: value
|
||||
}),
|
||||
pr: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingRight'>) => ({
|
||||
paddingRight: value
|
||||
}),
|
||||
pb: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingBottom'>) => ({
|
||||
paddingBottom: value
|
||||
}),
|
||||
pl: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingLeft'>) => ({
|
||||
paddingLeft: value
|
||||
}),
|
||||
px: (
|
||||
value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingLeft' | 'paddingRight'>
|
||||
) => ({
|
||||
paddingLeft: value,
|
||||
paddingRight: value
|
||||
}),
|
||||
py: (
|
||||
value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingTop' | 'paddingBottom'>
|
||||
) => ({
|
||||
paddingTop: value,
|
||||
paddingBottom: value
|
||||
}),
|
||||
|
||||
// A property for applying width/height together
|
||||
size: (
|
||||
value:
|
||||
| Stitches.ScaleValue<"space">
|
||||
| Stitches.PropertyValue<"width" | "height">
|
||||
) => ({
|
||||
width: value,
|
||||
height: value,
|
||||
}),
|
||||
// color: (value: Stitches.PropertyValue<'color'> | Stitches.PropertyValue<'width' | 'height'> => ({
|
||||
// color: value
|
||||
// }),
|
||||
// A property for applying width/height together
|
||||
size: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'width' | 'height'>) => ({
|
||||
width: value,
|
||||
height: value
|
||||
}),
|
||||
// color: (value: Stitches.PropertyValue<'color'> | Stitches.PropertyValue<'width' | 'height'> => ({
|
||||
// color: value
|
||||
// }),
|
||||
|
||||
// A property to apply linear gradient
|
||||
linearGradient: (value: Stitches.ScaleValue<"space">) => ({
|
||||
backgroundImage: `linear-gradient(${value})`,
|
||||
}),
|
||||
// A property to apply linear gradient
|
||||
linearGradient: (value: Stitches.ScaleValue<'space'>) => ({
|
||||
backgroundImage: `linear-gradient(${value})`
|
||||
}),
|
||||
|
||||
// An abbreviated property for border-radius
|
||||
br: (value: Stitches.ScaleValue<"space">) => ({
|
||||
borderRadius: value,
|
||||
}),
|
||||
},
|
||||
});
|
||||
// An abbreviated property for border-radius
|
||||
br: (value: Stitches.ScaleValue<'space'>) => ({
|
||||
borderRadius: value
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
export const darkTheme = createTheme("dark", {
|
||||
export const darkTheme = createTheme('dark', {
|
||||
colors: {
|
||||
...grayDark,
|
||||
...blueDark,
|
||||
@@ -365,24 +315,24 @@ export const darkTheme = createTheme("dark", {
|
||||
...purpleDark,
|
||||
...greenDark,
|
||||
...redDark,
|
||||
deep: "rgb(10, 10, 10)",
|
||||
backgroundOverlay: "$mauve5"
|
||||
deep: 'rgb(10, 10, 10)',
|
||||
backgroundOverlay: '$mauve5'
|
||||
// backgroundA: transparentize(0.1, grayDark.gray1),
|
||||
},
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
export const globalStyles = globalCss({
|
||||
// body: { backgroundColor: '$background', color: '$text', fontFamily: 'Helvetica' },
|
||||
"html, body": {
|
||||
backgroundColor: "$mauve2",
|
||||
color: "$mauve12",
|
||||
fontFamily: "$body",
|
||||
fontSize: "$md",
|
||||
"-webkit-font-smoothing": "antialiased",
|
||||
"-moz-osx-font-smoothing": "grayscale",
|
||||
'html, body': {
|
||||
backgroundColor: '$mauve2',
|
||||
color: '$mauve12',
|
||||
fontFamily: '$body',
|
||||
fontSize: '$md',
|
||||
'-webkit-font-smoothing': 'antialiased',
|
||||
'-moz-osx-font-smoothing': 'grayscale'
|
||||
},
|
||||
a: {
|
||||
color: "inherit",
|
||||
textDecoration: "none",
|
||||
},
|
||||
});
|
||||
color: 'inherit',
|
||||
textDecoration: 'none'
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user