Skip to content

Commit 8f5e651

Browse files
PyraxPyrax
committed
feat: add green theme with logo
1 parent b902409 commit 8f5e651

File tree

6 files changed

+165
-8
lines changed

6 files changed

+165
-8
lines changed

‎example/README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1-
# react-netlify-forms
1+
<center>
2+
3+
<img src="cover.png" alt="react-netlify-forms" title="react-netlify-forms" style="padding:1rem 0.5rem 0rem 0.5rem; max-height:140px;" />
24

35
> Netlify Forms as component or hook with default form handlers. Honeypot fields and reCAPTCHA are included as ready-to-use components.
46
57
[![NPM](https://img.shields.io/npm/v/react-netlify-forms.svg)](https://www.npmjs.com/package/react-netlify-forms) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
68

79
[Go to documentation with live demo.](https://pyrax.github.io/react-netlify-forms)
810

11+
</center>
12+
913
## Features
1014

1115
Why should you use react-netlify-forms?

‎example/src/gatsby-plugin-theme-ui/index.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { merge } from 'theme-ui'
22

3-
import { swiss } from '@theme-ui/presets'
4-
import github from '@theme-ui/prism/presets/prism-tomorrow'
5-
3+
import myTheme from './theme'
64
import sketchy from 'theme-ui-sketchy-preset'
75
import 'typeface-architects-daughter'
86

@@ -68,11 +66,8 @@ export const previewTheme = merge(sketchy, {
6866
}
6967
})
7068

71-
export default merge(swiss, {
69+
export default merge(myTheme, {
7270
styles: {
73-
pre: {
74-
...github
75-
},
7671
// Responsive tables by default:
7772
table: {
7873
display: 'block',

‎example/src/gatsby-plugin-theme-ui/theme.js‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
const heading = {
2+
fontFamily: 'heading',
3+
fontWeight: 'heading',
4+
lineHeight: 'heading'
5+
}
6+
7+
// Based on theme-ui/swiss with different colors
8+
export const theme = {
9+
breakpoints: ['30em', '48em', '80em'],
10+
colors: {
11+
text: 'hsl(165, 20%, 20%)',
12+
background: 'hsl(190, 10%, 98%)',
13+
primary: 'hsl(165, 60%, 30%)',
14+
secondary: 'hsl(125, 80%, 35%)',
15+
highlight: 'hsl(114, 40%, 90%)',
16+
muted: 'hsl(165, 20%, 94%)',
17+
gray: 'hsl(165, 20%, 75%)',
18+
purple: 'hsl(250, 60%, 30%)'
19+
},
20+
fonts: {
21+
body:
22+
'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
23+
heading: 'inherit',
24+
monospace: 'Menlo, monospace'
25+
},
26+
fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
27+
fontWeights: {
28+
body: 400,
29+
heading: 700,
30+
display: 900
31+
},
32+
lineHeights: {
33+
body: 1.5,
34+
heading: 1.25
35+
},
36+
textStyles: {
37+
heading,
38+
display: {
39+
variant: 'textStyles.heading',
40+
fontSize: [5, 6],
41+
fontWeight: 'display',
42+
letterSpacing: '-0.03em',
43+
mt: 3
44+
}
45+
},
46+
styles: {
47+
Container: {
48+
p: 3,
49+
maxWidth: 1024
50+
},
51+
root: {
52+
fontFamily: 'body',
53+
lineHeight: 'body',
54+
fontWeight: 'body'
55+
},
56+
h1: {
57+
variant: 'textStyles.display'
58+
},
59+
h2: {
60+
variant: 'textStyles.heading',
61+
fontSize: 5
62+
},
63+
h3: {
64+
variant: 'textStyles.heading',
65+
fontSize: 4
66+
},
67+
h4: {
68+
variant: 'textStyles.heading',
69+
fontSize: 3
70+
},
71+
h5: {
72+
variant: 'textStyles.heading',
73+
fontSize: 2
74+
},
75+
h6: {
76+
variant: 'textStyles.heading',
77+
fontSize: 1
78+
},
79+
a: {
80+
color: 'primary',
81+
'&:hover': {
82+
color: 'secondary'
83+
}
84+
},
85+
pre: {
86+
variant: 'prism',
87+
fontFamily: 'monospace',
88+
fontSize: 1,
89+
p: 3,
90+
color: 'text',
91+
bg: 'muted',
92+
overflow: 'auto',
93+
code: {
94+
color: 'inherit'
95+
}
96+
},
97+
code: {
98+
fontFamily: 'monospace',
99+
color: 'secondary',
100+
fontSize: 1
101+
},
102+
inlineCode: {
103+
fontFamily: 'monospace',
104+
color: 'secondary',
105+
bg: 'muted'
106+
},
107+
table: {
108+
width: '100%',
109+
my: 4,
110+
borderCollapse: 'separate',
111+
borderSpacing: 0,
112+
'th,td': {
113+
textAlign: 'left',
114+
py: '4px',
115+
pr: '4px',
116+
pl: 0,
117+
borderColor: 'muted',
118+
borderBottomStyle: 'solid'
119+
}
120+
},
121+
th: {
122+
verticalAlign: 'bottom',
123+
borderBottomWidth: '2px'
124+
},
125+
td: {
126+
verticalAlign: 'top',
127+
borderBottomWidth: '1px'
128+
},
129+
hr: {
130+
border: 0,
131+
borderBottom: '1px solid',
132+
borderColor: 'muted'
133+
},
134+
img: {
135+
maxWidth: '100%'
136+
}
137+
},
138+
prism: {
139+
'.comment,.prolog,.doctype,.cdata,.punctuation,.operator,.entity,.url': {
140+
color: 'gray'
141+
},
142+
'.comment': {
143+
fontStyle: 'italic'
144+
},
145+
'.property,.tag,.boolean,.number,.constant,.symbol,.deleted,.function,.class-name,.regex,.important,.variable': {
146+
color: 'purple'
147+
},
148+
'.atrule,.attr-value,.keyword': {
149+
color: 'primary'
150+
},
151+
'.selector,.attr-name,.string,.char,.builtin,.inserted': {
152+
color: 'secondary'
153+
}
154+
}
155+
}
156+
157+
export default theme

‎example/src/images/favicon.png‎

-10.4 KB
Loading

‎example/static/cover.png‎

14.8 KB
Loading

‎example/static/logo-monochrome.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)