@t2ca/gatsby-theme-showcase 1.0.121 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/gatsby-config.js +0 -1
  2. package/package.json +8 -12
  3. package/src/components/alert.js +0 -1
  4. package/src/components/button.js +0 -1
  5. package/src/components/card.js +0 -1
  6. package/src/components/color-mode-toggle.js +162 -91
  7. package/src/components/footer.js +0 -1
  8. package/src/components/layout.js +0 -11
  9. package/src/components/logo-banner.js +0 -1
  10. package/src/components/menu-button.js +1 -2
  11. package/src/gatsby-plugin-theme-ui/index.js +1 -1
  12. package/src/gatsby-plugin-theme-ui/styles.js +5 -0
package/gatsby-config.js CHANGED
@@ -3,7 +3,6 @@
3
3
  *
4
4
  * See: https://www.gatsbyjs.org/docs/gatsby-config/
5
5
  */
6
- const remarkPlugins = [require("remark-slug")]
7
6
 
8
7
  module.exports = ({ contentPath = "data", basePath = "/" }) => ({
9
8
  plugins: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@t2ca/gatsby-theme-showcase",
3
- "version": "1.0.121",
3
+ "version": "1.1.0",
4
4
  "main": "index.js",
5
5
  "license": "MIT",
6
6
  "devDependencies": {
@@ -22,20 +22,17 @@
22
22
  "react-dom": "^17.0.1"
23
23
  },
24
24
  "dependencies": {
25
- "@emotion/react": "^11.0.0",
26
- "@emotion/styled": "^11.0.0",
27
- "@theme-ui/components": "^0.7.2",
28
- "@theme-ui/preset-bootstrap": "^0.7.2",
29
- "@theme-ui/preset-tailwind": "^0.7.2",
30
- "@theme-ui/sidenav": "^0.7.2",
31
- "@theme-ui/typography": "^0.7.2",
25
+ "@theme-ui/components": "^0.8.4",
26
+ "@theme-ui/preset-bootstrap": "^0.8.4",
27
+ "@theme-ui/preset-tailwind": "^0.8.4",
28
+ "@theme-ui/sidenav": "^0.8.4",
29
+ "@theme-ui/typography": "^0.8.4",
32
30
  "framer-motion": "^4.0.0",
33
31
  "gatsby": "^3.2.0",
34
32
  "gatsby-image": "^3.0.0",
35
- "gatsby-plugin-emotion": "^6.0.0",
36
33
  "gatsby-plugin-react-helmet": "^4.0.0",
37
34
  "gatsby-plugin-sharp": "^3.0.0",
38
- "gatsby-plugin-theme-ui": "^0.7.2",
35
+ "gatsby-plugin-theme-ui": "^0.8.4",
39
36
  "gatsby-remark-images": "^5.0.0",
40
37
  "gatsby-source-filesystem": "^3.0.0",
41
38
  "gatsby-transformer-json": "^3.0.0",
@@ -44,8 +41,7 @@
44
41
  "gatsby-transformer-yaml": "^3.0.0",
45
42
  "react-helmet": "^6.0.0",
46
43
  "react-icons": "^4.1.0",
47
- "remark-slug": "^6.0.0",
48
- "theme-ui": "^0.7.2",
44
+ "theme-ui": "^0.8.4",
49
45
  "yup": "^0.32.8"
50
46
  },
51
47
  "scripts": {
package/src/components/alert.js CHANGED
@@ -1,5 +1,4 @@
1
1
  /** @jsx jsx */
2
- import React from "react"
3
2
  import { jsx } from "theme-ui"
4
3
  import { FaExclamationTriangle, FaCheckCircle } from "react-icons/fa"
5
4
 
package/src/components/button.js CHANGED
@@ -1,5 +1,4 @@
1
1
  /** @jsx jsx */
2
- import React from "react"
3
2
  import { jsx } from "theme-ui"
4
3
 
5
4
  export default ({ type = "basic", ...props }) => (
package/src/components/card.js CHANGED
@@ -1,5 +1,4 @@
1
1
  /** @jsx jsx */
2
- import React from "react"
3
2
  import { jsx, Themed } from "theme-ui"
4
3
  import Button from "./button"
5
4
 
package/src/components/color-mode-toggle.js CHANGED
@@ -1,95 +1,96 @@
1
- import React, { useState, useEffect } from "react"
2
- import styled from "@emotion/styled"
3
- import { useThemeUI } from "theme-ui"
1
+ /** @jsx jsx */
2
+ import { useState, useEffect } from "react"
3
+ // import styled from "@emotion/styled"
4
+ import { jsx, useThemeUI } from "theme-ui"
4
5
 
5
- const IconWrapper = styled.button`
6
- padding: 0;
7
- appearance: none;
8
- outline: none;
9
- align-items: center;
10
- background: transparent;
11
- border-radius: 5px;
12
- border: 0;
13
- cursor: pointer;
14
- display: inline-flex;
15
- height: 40px;
16
- justify-content: center;
17
- opacity: 0.75;
18
- overflow: hidden;
19
- position: relative;
20
- transform: scale(0.75);
21
- transition: opacity 0.3s ease;
22
- vertical-align: middle;
23
- width: 40px;
24
- &:hover {
25
- opacity: 1;
26
- }
27
- `
6
+ // const IconWrapper = styled.button`
7
+ // padding: 0;
8
+ // appearance: none;
9
+ // outline: none;
10
+ // align-items: center;
11
+ // background: transparent;
12
+ // border-radius: 5px;
13
+ // border: 0;
14
+ // cursor: pointer;
15
+ // display: inline-flex;
16
+ // height: 40px;
17
+ // justify-content: center;
18
+ // opacity: 0.75;
19
+ // overflow: hidden;
20
+ // position: relative;
21
+ // transform: scale(0.75);
22
+ // transition: opacity 0.3s ease;
23
+ // vertical-align: middle;
24
+ // width: 40px;
25
+ // &:hover {
26
+ // opacity: 1;
27
+ // }
28
+ // `
28
29
 
29
- const MoonOrSun = styled.div`
30
- border: ${(p) => (p.isDark ? `4px` : `2px`)} solid
31
- ${(p) => p.theme.colors.toggleIcon};
32
- background: ${(p) => p.theme.colors.toggleIcon};
33
- border-radius: 50%;
34
- height: 24px;
35
- overflow: ${(p) => (p.isDark ? `visible` : `hidden`)};
36
- position: relative;
37
- transform: scale(${(p) => (p.isDark ? 0.55 : 1)});
38
- transition: all 0.45s ease;
39
- width: 24px;
40
- &::before {
41
- border-radius: 50%;
42
- border: 2px solid ${(p) => p.theme.colors.toggleIcon};
43
- content: "";
44
- height: 24px;
45
- opacity: ${(p) => (p.isDark ? 0 : 1)};
46
- position: absolute;
47
- right: -9px;
48
- top: -9px;
49
- transform: translate(${(p) => (p.isDark ? `14px, -14px` : `0, 0`)});
50
- transition: transform 0.45s ease;
51
- width: 24px;
52
- }
53
- &::after {
54
- border-radius: 50%;
55
- box-shadow: 0 -23px 0 ${(p) => p.theme.colors.toggleIcon},
56
- 0 23px 0 ${(p) => p.theme.colors.toggleIcon},
57
- 23px 0 0 ${(p) => p.theme.colors.toggleIcon},
58
- -23px 0 0 ${(p) => p.theme.colors.toggleIcon},
59
- 15px 15px 0 ${(p) => p.theme.colors.toggleIcon},
60
- -15px 15px 0 ${(p) => p.theme.colors.toggleIcon},
61
- 15px -15px 0 ${(p) => p.theme.colors.toggleIcon},
62
- -15px -15px 0 ${(p) => p.theme.colors.toggleIcon};
63
- content: "";
64
- height: 8px;
65
- left: 50%;
66
- margin: -4px 0 0 -4px;
67
- position: absolute;
68
- top: 50%;
69
- width: 8px;
70
- transform: scale(${(p) => (p.isDark ? 1 : 0)});
71
- transition: all 0.35s ease;
72
- }
73
- `
30
+ // const MoonOrSun = styled.div`
31
+ // border: ${(p) => (p.isDark ? `4px` : `2px`)} solid
32
+ // ${(p) => p.theme.colors.toggleIcon};
33
+ // background: ${(p) => p.theme.colors.toggleIcon};
34
+ // border-radius: 50%;
35
+ // height: 24px;
36
+ // overflow: ${(p) => (p.isDark ? `visible` : `hidden`)};
37
+ // position: relative;
38
+ // transform: scale(${(p) => (p.isDark ? 0.55 : 1)});
39
+ // transition: all 0.45s ease;
40
+ // width: 24px;
41
+ // &::before {
42
+ // border-radius: 50%;
43
+ // border: 2px solid ${(p) => p.theme.colors.toggleIcon};
44
+ // content: "";
45
+ // height: 24px;
46
+ // opacity: ${(p) => (p.isDark ? 0 : 1)};
47
+ // position: absolute;
48
+ // right: -9px;
49
+ // top: -9px;
50
+ // transform: translate(${(p) => (p.isDark ? `14px, -14px` : `0, 0`)});
51
+ // transition: transform 0.45s ease;
52
+ // width: 24px;
53
+ // }
54
+ // &::after {
55
+ // border-radius: 50%;
56
+ // box-shadow: 0 -23px 0 ${(p) => p.theme.colors.toggleIcon},
57
+ // 0 23px 0 ${(p) => p.theme.colors.toggleIcon},
58
+ // 23px 0 0 ${(p) => p.theme.colors.toggleIcon},
59
+ // -23px 0 0 ${(p) => p.theme.colors.toggleIcon},
60
+ // 15px 15px 0 ${(p) => p.theme.colors.toggleIcon},
61
+ // -15px 15px 0 ${(p) => p.theme.colors.toggleIcon},
62
+ // 15px -15px 0 ${(p) => p.theme.colors.toggleIcon},
63
+ // -15px -15px 0 ${(p) => p.theme.colors.toggleIcon};
64
+ // content: "";
65
+ // height: 8px;
66
+ // left: 50%;
67
+ // margin: -4px 0 0 -4px;
68
+ // position: absolute;
69
+ // top: 50%;
70
+ // width: 8px;
71
+ // transform: scale(${(p) => (p.isDark ? 1 : 0)});
72
+ // transition: all 0.35s ease;
73
+ // }
74
+ // `
74
75
 
75
- const MoonMask = styled.div`
76
- background: ${(p) => p.theme.colors.MoonMask};
77
- border-radius: 50%;
78
- border: 0;
79
- height: 24px;
80
- opacity: ${(p) => (p.isDark ? 0 : 1)};
81
- position: absolute;
82
- right: 0;
83
- top: 0;
84
- transform: translate(${(p) => (p.isDark ? `14px, -14px` : `0, 0`)});
85
- transition: background 0.25s ease, transform 0.45s ease;
86
- width: 24px;
87
- `
76
+ // const MoonMask = styled.div`
77
+ // background: ${(p) => p.theme.colors.MoonMask};
78
+ // border-radius: 50%;
79
+ // border: 0;
80
+ // height: 24px;
81
+ // opacity: ${(p) => (p.isDark ? 0 : 1)};
82
+ // position: absolute;
83
+ // right: 0;
84
+ // top: 0;
85
+ // transform: translate(${(p) => (p.isDark ? `14px, -14px` : `0, 0`)});
86
+ // transition: background 0.25s ease, transform 0.45s ease;
87
+ // width: 24px;
88
+ // `
88
89
 
89
90
  const ColorModeToggle = () => {
90
91
  const [hasMounted, setHasMounted] = useState(false)
91
92
  const context = useThemeUI()
92
- const { theme, colorMode, setColorMode } = context
93
+ const { colorMode, setColorMode } = context
93
94
  const isDark = colorMode === `dark`
94
95
 
95
96
  const toggleColorMode = (e) => {
@@ -106,14 +107,84 @@ const ColorModeToggle = () => {
106
107
  }
107
108
 
108
109
  return (
109
- <IconWrapper
110
+ // <IconWrapper
111
+ // onClick={toggleColorMode}
112
+ // aria-label={isDark ? `Activate light mode` : `Activate dark mode`}
113
+ // title={isDark ? `Activate light mode` : `Activate dark mode`}
114
+ // >
115
+ // <MoonOrSun isDark={isDark} theme={theme} />
116
+ // <MoonMask isDark={isDark} theme={theme} />
117
+ // </IconWrapper>
118
+
119
+ <button
110
120
  onClick={toggleColorMode}
111
- aria-label={isDark ? `Activate light mode` : `Activate dark mode`}
112
- title={isDark ? `Activate light mode` : `Activate dark mode`}
121
+ type="button"
122
+ aria-label={isDark ? `Activate Light mode` : `Activate Dark mode`}
123
+ title={isDark ? `Activate Light mode` : `Activate Dark mode`}
124
+ sx={{
125
+ opacity: 0.65,
126
+ position: `relative`,
127
+ borderRadius: `5px`,
128
+ width: `40px`,
129
+ height: `25px`,
130
+ display: `flex`,
131
+ alignItems: `center`,
132
+ justifyContent: `center`,
133
+ transition: `opacity 0.3s ease`,
134
+ border: `none`,
135
+ outline: `none`,
136
+ background: `none`,
137
+ cursor: `pointer`,
138
+ transform: `scale(0.75)`,
139
+ padding: 0,
140
+ appearance: `none`,
141
+ "&:hover, &:focus": { opacity: 1 },
142
+ }}
113
143
  >
114
- <MoonOrSun isDark={isDark} theme={theme} />
115
- <MoonMask isDark={isDark} theme={theme} />
116
- </IconWrapper>
144
+ <div
145
+ sx={{
146
+ position: `relative`,
147
+ width: `24px`,
148
+ height: `24px`,
149
+ borderRadius: `50%`,
150
+ border: (t) => (isDark ? `4px solid ${t.colors.toggleIcon}` : `none`),
151
+ backgroundColor: isDark ? `toggleIcon` : `transparent`,
152
+ transform: isDark ? `scale(0.55)` : `scale(1)`,
153
+ transition: `all 0.45s ease`,
154
+ overflow: isDark ? `visible` : `hidden`,
155
+ boxShadow: (t) =>
156
+ isDark ? `none` : `inset 8px -8px 0px 0px ${t.colors.toggleIcon}`,
157
+ "&:before": {
158
+ content: `""`,
159
+ position: `absolute`,
160
+ right: `-9px`,
161
+ top: `-9px`,
162
+ height: `24px`,
163
+ width: `24px`,
164
+ border: (t) =>
165
+ isDark ? `2px solid ${t.colors.toggleIcon}` : `none`,
166
+ borderRadius: `50%`,
167
+ transform: isDark ? `translate(14px, -14px)` : `translate(0, 0)`,
168
+ opacity: isDark ? 0 : 1,
169
+ transition: `transform 0.45s ease`,
170
+ },
171
+ "&:after": {
172
+ content: `""`,
173
+ width: `8px`,
174
+ height: `8px`,
175
+ borderRadius: `50%`,
176
+ margin: `-4px 0 0 -4px`,
177
+ position: `absolute`,
178
+ top: `50%`,
179
+ left: `50%`,
180
+ boxShadow: (t) =>
181
+ `0 -23px 0 ${t.colors.toggleIcon}, 0 23px 0 ${t.colors.toggleIcon}, 23px 0 0 ${t.colors.toggleIcon}, -23px 0 0 ${t.colors.toggleIcon}, 15px 15px 0 ${t.colors.toggleIcon}, -15px 15px 0 ${t.colors.toggleIcon}, 15px -15px 0 ${t.colors.toggleIcon}, -15px -15px 0 ${t.colors.toggleIcon}`,
182
+ transform: isDark ? `scale(1)` : `scale(0)`,
183
+ transition: `all 0.35s ease`,
184
+ },
185
+ }}
186
+ />
187
+ </button>
117
188
  )
118
189
  }
119
190
 
package/src/components/footer.js CHANGED
@@ -1,5 +1,4 @@
1
1
  /** @jsx jsx */
2
- import React from "react"
3
2
  import { jsx, Box, Container } from "theme-ui"
4
3
  import { FaTwitter, FaGithub, FaLinkedin, FaInstagram } from "react-icons/fa"
5
4
 
package/src/components/layout.js CHANGED
@@ -1,7 +1,6 @@
1
1
  /** @jsx jsx */
2
2
  import { useState, useEffect } from "react"
3
3
  import { jsx, Themed } from "theme-ui"
4
- import { Global } from "@emotion/react"
5
4
  import { Helmet } from "react-helmet"
6
5
 
7
6
  import MobileNavigation from "./navigation-mobile"
@@ -20,16 +19,6 @@ const Layout = ({ header, children }) => {
20
19
 
21
20
  return (
22
21
  <Themed.root>
23
- <Global
24
- styles={{
25
- html: {
26
- fontSize: `16px`,
27
- WebkitFontSmoothing: `antialiased`,
28
- MozOsxFontSmoothing: `grayscale`,
29
- },
30
- }}
31
- />
32
-
33
22
  <Helmet>
34
23
  <html lang="en" />
35
24
  </Helmet>
package/src/components/logo-banner.js CHANGED
@@ -1,5 +1,4 @@
1
1
  /** @jsx jsx */
2
- import React from "react"
3
2
  import { useStaticQuery, graphql } from "gatsby"
4
3
  import { jsx } from "theme-ui"
5
4
  import Img from "gatsby-image"
package/src/components/menu-button.js CHANGED
@@ -1,5 +1,4 @@
1
1
  /** @jsx jsx */
2
- import React from "react"
3
2
  import { jsx } from "theme-ui"
4
3
 
5
4
  const Burger = ({ size = "1.5rem" }) => (
@@ -18,7 +17,7 @@ const Burger = ({ size = "1.5rem" }) => (
18
17
  </svg>
19
18
  )
20
19
 
21
- export default props => {
20
+ export default (props) => {
22
21
  return (
23
22
  <button
24
23
  title="Toggle Menu"
package/src/gatsby-plugin-theme-ui/index.js CHANGED
@@ -4,7 +4,7 @@ import styles from "./styles"
4
4
  import colors from "./colors"
5
5
 
6
6
  export default merge(tailwind, {
7
- useColorSchemeMediaQuery: false,
7
+ initialColorModeName: "light",
8
8
  colors,
9
9
  styles,
10
10
  buttons: {
package/src/gatsby-plugin-theme-ui/styles.js CHANGED
@@ -1,4 +1,9 @@
1
1
  export default {
2
+ root: {
3
+ fontSize: `16px`,
4
+ WebkitFontSmoothing: `antialiased`,
5
+ MozOsxFontSmoothing: `grayscale`,
6
+ },
2
7
  Container: {
3
8
  py: 3,
4
9
  width: ["100%", "90%"],