Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 2930358

Browse files
carwackcarwack
committed
feat: refactor custom theme and green shades
1 parent a9dbdda commit 2930358

File tree

3 files changed

+151
-147
lines changed

3 files changed

+151
-147
lines changed

‎website/src/assets/custom-theme.ts

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
import { extendTheme } from '@chakra-ui/vue-next'
2+
import { mode } from '@chakra-ui/vue-theme-tools'
3+
4+
export default extendTheme({
5+
colors: {
6+
green: {
7+
50: '#EEF8F4',
8+
100: '#CDEBDD',
9+
200: '#ACDEC6',
10+
300: '#8BD1AF',
11+
400: '#6AC398',
12+
500: '#49B682',
13+
600: '#35845E',
14+
700: '#2E7452',
15+
800: '#21533B',
16+
900: '#143223',
17+
},
18+
},
19+
fonts: {
20+
heading: 'Inter, sans-serif',
21+
body: 'Inter, sans-serif',
22+
},
23+
shadows: {
24+
search:
25+
'0 0 0 1px rgba(16,22,26,.1), 0 4px 8px rgba(16,22,26,.2), 0 18px 46px 6px rgba(16,22,26,.2)',
26+
},
27+
styles: {
28+
global: (props: any) => ({
29+
body: {
30+
color: mode('gray.700', 'whiteAlpha.900')(props),
31+
'.deleted': {
32+
color: '#ff8383 !important',
33+
fontStyle: 'normal !important',
34+
},
35+
'.inserted': {
36+
color: '#b5f4a5 !important',
37+
fontStyle: 'normal !important',
38+
},
39+
},
40+
}),
41+
},
42+
textStyles: {
43+
heading: {
44+
fontFamily: 'heading',
45+
textAlign: 'center',
46+
fontWeight: 'bold',
47+
letterSpacing: '-0.015em',
48+
lineHeight: '1.24',
49+
fontSize: { base: '2rem', md: '3.5rem' },
50+
},
51+
'heading-2': {
52+
fontFamily: 'heading',
53+
textAlign: 'center',
54+
fontWeight: 'bold',
55+
letterSpacing: '-0.015em',
56+
lineHeight: '1.24',
57+
fontSize: { base: '1.75rem', md: '2.75rem' },
58+
},
59+
caps: {
60+
textTransform: 'uppercase',
61+
fontSize: 'sm',
62+
letterSpacing: 'widest',
63+
fontWeight: 'bold',
64+
},
65+
},
66+
mdx: {
67+
h1: {
68+
mt: '2rem',
69+
mb: '.25rem',
70+
lineHeight: 1.2,
71+
fontWeight: 'bold',
72+
fontSize: '1.875rem',
73+
letterSpacing: '-.025em',
74+
},
75+
h2: {
76+
mt: '4rem',
77+
mb: '0.5rem',
78+
lineHeight: 1.3,
79+
fontWeight: 'semibold',
80+
fontSize: '1.5rem',
81+
letterSpacing: '-.025em',
82+
'& + h3': {
83+
mt: '1.5rem',
84+
},
85+
},
86+
h3: {
87+
mt: '3rem',
88+
// mb: "0.5rem",
89+
lineHeight: 1.25,
90+
fontWeight: 'semibold',
91+
fontSize: '1.25rem',
92+
letterSpacing: '-.025em',
93+
},
94+
h4: {
95+
mt: '3rem',
96+
lineHeight: 1.375,
97+
fontWeight: 'semibold',
98+
fontSize: '1.125rem',
99+
},
100+
a: {
101+
color: 'teal.500',
102+
fontWeight: 'semibold',
103+
transition: 'color 0.15s',
104+
transitionTimingFunction: 'ease-out',
105+
_hover: {
106+
color: 'teal.600',
107+
},
108+
},
109+
p: {
110+
mt: '1.25rem',
111+
lineHeight: 1.7,
112+
'blockquote &': {
113+
mt: 0,
114+
},
115+
},
116+
hr: {
117+
my: '4rem',
118+
},
119+
blockquote: {
120+
bg: 'orange.100',
121+
borderWidth: '1px',
122+
borderColor: 'orange.200',
123+
rounded: 'lg',
124+
px: '1.25rem',
125+
py: '1rem',
126+
my: '1.5rem',
127+
},
128+
ul: {
129+
mt: '1.5rem',
130+
ml: '1.25rem',
131+
'blockquote &': { mt: 0 },
132+
'& > * + *': {
133+
mt: '0.25rem',
134+
},
135+
},
136+
code: {
137+
rounded: 'sm',
138+
px: '1',
139+
fontSize: '0.875em',
140+
py: '2px',
141+
whiteSpace: 'nowrap',
142+
lineHeight: 'normal',
143+
},
144+
},
145+
})

‎website/src/components/home/Hero.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
lineHeight="1.2"
2020
>
2121
Build accessible Vue apps
22-
<chakra.span color="#35845E" px="5px">with speed </chakra.span>
22+
<chakra.span color="green.600" px="5px">with speed </chakra.span>
2323
</chakra.h1>
2424
</chakra.div>
2525
<chakra.p
@@ -44,7 +44,7 @@
4444
target="_blank"
4545
rel="noopener noreferrer"
4646
color-scheme="green"
47-
bg="#35845E"
47+
bg="green.600"
4848
>
4949
Get started
5050
</CButton>
@@ -59,7 +59,7 @@
5959
variant="outline"
6060
color-scheme="green"
6161
size="lg"
62-
color="#35845E"
62+
color="green.600"
6363
>
6464
Github
6565
</CButton>

‎website/src/main.ts

Lines changed: 3 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import App from './App.vue'
22
import { ViteSSG } from 'vite-ssg'
3-
import ChakraUIVuePlugin, { chakra, extendTheme } from '@chakra-ui/vue-next'
3+
import ChakraUIVuePlugin, { chakra } from '@chakra-ui/vue-next'
44
import { domElements } from '@chakra-ui/vue-system'
55
import {
66
feGithub,
@@ -15,7 +15,7 @@ import { hydrate } from '@emotion/css'
1515
import routes from 'pages-generated'
1616

1717
import './styles/main.css'
18-
import { mode } from '@chakra-ui/vue-theme-tools'
18+
import customTheme from './assets/custom-theme'
1919

2020
export const createApp = ViteSSG(App, { routes }, ({ app, isClient }) => {
2121
if (isClient) {
@@ -25,148 +25,7 @@ export const createApp = ViteSSG(App, { routes }, ({ app, isClient }) => {
2525
}
2626

2727
app.use(ChakraUIVuePlugin, {
28-
extendTheme: extendTheme({
29-
colors: {
30-
green: {
31-
'50': '#EDF8F2',
32-
'100': '#CCEBDC',
33-
'200': '#ABDEC5',
34-
'300': '#8AD0AE',
35-
'400': '#6AC397',
36-
'500': '#49B681',
37-
'600': '#3A9267',
38-
'700': '#2C6D4D',
39-
'800': '#1D4933',
40-
'900': '#0F241A',
41-
},
42-
},
43-
fonts: {
44-
heading: 'Inter, sans-serif',
45-
body: 'Inter, sans-serif',
46-
},
47-
shadows: {
48-
search:
49-
'0 0 0 1px rgba(16,22,26,.1), 0 4px 8px rgba(16,22,26,.2), 0 18px 46px 6px rgba(16,22,26,.2)',
50-
},
51-
styles: {
52-
global: (props: any) => ({
53-
body: {
54-
color: mode('gray.700', 'whiteAlpha.900')(props),
55-
'.deleted': {
56-
color: '#ff8383 !important',
57-
fontStyle: 'normal !important',
58-
},
59-
'.inserted': {
60-
color: '#b5f4a5 !important',
61-
fontStyle: 'normal !important',
62-
},
63-
},
64-
}),
65-
},
66-
textStyles: {
67-
heading: {
68-
fontFamily: 'heading',
69-
textAlign: 'center',
70-
fontWeight: 'bold',
71-
letterSpacing: '-0.015em',
72-
lineHeight: '1.24',
73-
fontSize: { base: '2rem', md: '3.5rem' },
74-
},
75-
'heading-2': {
76-
fontFamily: 'heading',
77-
textAlign: 'center',
78-
fontWeight: 'bold',
79-
letterSpacing: '-0.015em',
80-
lineHeight: '1.24',
81-
fontSize: { base: '1.75rem', md: '2.75rem' },
82-
},
83-
caps: {
84-
textTransform: 'uppercase',
85-
fontSize: 'sm',
86-
letterSpacing: 'widest',
87-
fontWeight: 'bold',
88-
},
89-
},
90-
mdx: {
91-
h1: {
92-
mt: '2rem',
93-
mb: '.25rem',
94-
lineHeight: 1.2,
95-
fontWeight: 'bold',
96-
fontSize: '1.875rem',
97-
letterSpacing: '-.025em',
98-
},
99-
h2: {
100-
mt: '4rem',
101-
mb: '0.5rem',
102-
lineHeight: 1.3,
103-
fontWeight: 'semibold',
104-
fontSize: '1.5rem',
105-
letterSpacing: '-.025em',
106-
'& + h3': {
107-
mt: '1.5rem',
108-
},
109-
},
110-
h3: {
111-
mt: '3rem',
112-
// mb: "0.5rem",
113-
lineHeight: 1.25,
114-
fontWeight: 'semibold',
115-
fontSize: '1.25rem',
116-
letterSpacing: '-.025em',
117-
},
118-
h4: {
119-
mt: '3rem',
120-
lineHeight: 1.375,
121-
fontWeight: 'semibold',
122-
fontSize: '1.125rem',
123-
},
124-
a: {
125-
color: 'teal.500',
126-
fontWeight: 'semibold',
127-
transition: 'color 0.15s',
128-
transitionTimingFunction: 'ease-out',
129-
_hover: {
130-
color: 'teal.600',
131-
},
132-
},
133-
p: {
134-
mt: '1.25rem',
135-
lineHeight: 1.7,
136-
'blockquote &': {
137-
mt: 0,
138-
},
139-
},
140-
hr: {
141-
my: '4rem',
142-
},
143-
blockquote: {
144-
bg: 'orange.100',
145-
borderWidth: '1px',
146-
borderColor: 'orange.200',
147-
rounded: 'lg',
148-
px: '1.25rem',
149-
py: '1rem',
150-
my: '1.5rem',
151-
},
152-
ul: {
153-
mt: '1.5rem',
154-
ml: '1.25rem',
155-
'blockquote &': { mt: 0 },
156-
'& > * + *': {
157-
mt: '0.25rem',
158-
},
159-
},
160-
code: {
161-
rounded: 'sm',
162-
px: '1',
163-
fontSize: '0.875em',
164-
py: '2px',
165-
whiteSpace: 'nowrap',
166-
lineHeight: 'normal',
167-
},
168-
},
169-
}),
28+
extendTheme: customTheme,
17029
icons: {
17130
library: {
17231
feGithub,

0 commit comments

Comments
 (0)