@t2ca/gatsby-theme-showcase 1.2.5 → 1.2.7

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 (4) hide show
  1. package/babel.config.js +12 -0
  2. package/gatsby-config.js +1 -0
  3. package/package.json +2 -1
  4. package/src/components/color-mode-toggle.js +82 -160
package/babel.config.js ADDED
@@ -0,0 +1,12 @@
1
+ module.exports = {
2
+ presets: [
3
+ [
4
+ "@babel/plugin-transform-react-jsx",
5
+ {
6
+ importSource: "theme-ui", // or '@theme-ui/core'
7
+ runtime: "automatic",
8
+ throwIfNamespace: false,
9
+ },
10
+ ],
11
+ ],
12
+ }
package/gatsby-config.js CHANGED
@@ -20,6 +20,7 @@ module.exports = {
20
20
  path: "./src/assets",
21
21
  },
22
22
  },
23
+ `gatsby-plugin-image`,
23
24
  `gatsby-plugin-sharp`,
24
25
  `gatsby-transformer-sharp`,
25
26
  `gatsby-transformer-yaml`,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@t2ca/gatsby-theme-showcase",
3
- "version": "1.2.5",
3
+ "version": "1.2.7",
4
4
  "main": "index.js",
5
5
  "license": "MIT",
6
6
  "devDependencies": {
@@ -29,6 +29,7 @@
29
29
  "@theme-ui/typography": "^0.9.1",
30
30
  "framer-motion": "^4.0.0",
31
31
  "gatsby": "^3.0.0",
32
+ "gatsby-plugin-image": "^1.7.1",
32
33
  "gatsby-plugin-react-helmet": "^4.0.0",
33
34
  "gatsby-plugin-sharp": "^3.0.0",
34
35
  "gatsby-plugin-theme-ui": "^0.9.1",
package/src/components/color-mode-toggle.js CHANGED
@@ -1,92 +1,7 @@
1
1
  /** @jsx jsx */
2
2
  import { useState, useEffect } from "react"
3
- import styled from "@emotion/styled"
4
3
  import { jsx, useThemeUI } from "theme-ui"
5
4
 
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
- `
29
-
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
- `
75
-
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
- `
89
-
90
5
  const ColorModeToggle = () => {
91
6
  const [hasMounted, setHasMounted] = useState(false)
92
7
  const context = useThemeUI()
@@ -107,84 +22,91 @@ const ColorModeToggle = () => {
107
22
  }
108
23
 
109
24
  return (
110
- <IconWrapper
111
- onClick={toggleColorMode}
25
+ <button
112
26
  aria-label={isDark ? `Activate light mode` : `Activate dark mode`}
27
+ onClick={toggleColorMode}
113
28
  title={isDark ? `Activate light mode` : `Activate dark mode`}
29
+ sx={{
30
+ padding: 0,
31
+ appearance: `none`,
32
+ outline: `none`,
33
+ alignItems: `center`,
34
+ background: `transparent`,
35
+ borderRadius: `5px`,
36
+ border: 0,
37
+ cursor: `pointer`,
38
+ display: `inline-flex`,
39
+ height: `40px`,
40
+ justifyContent: `center`,
41
+ opacity: 0.75,
42
+ overflow: `hidden`,
43
+ position: `relative`,
44
+ transform: `scale(0.75)`,
45
+ transition: `opacity 0.3s ease`,
46
+ verticalAlign: `middle`,
47
+ width: `40px`,
48
+ "&:hover": { opacity: 1 },
49
+ }}
114
50
  >
115
- <MoonOrSun isDark={isDark} />
116
- <MoonMask isDark={isDark} />
117
- </IconWrapper>
118
-
119
- // <button
120
- // onClick={toggleColorMode}
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
- // }}
143
- // >
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>
51
+ <div
52
+ sx={{
53
+ border: (p) =>
54
+ isDark
55
+ ? `4px solid ${p.colors.toggleIcon}`
56
+ : `2px solid ${p.colors.toggleIcon}`,
57
+ background: (p) => p.colors.toggleIcon,
58
+ borderRadius: `50%`,
59
+ height: `24px`,
60
+ overflow: isDark ? `visible` : `hidden`,
61
+ position: `relative`,
62
+ transform: `scale(${isDark ? 0.55 : 1})`,
63
+ transition: `all 0.45s ease`,
64
+ width: `24px`,
65
+ "&::before": {
66
+ borderRadius: `50%`,
67
+ border: `2px solid ${(p) => p.colors.toggleIcon}`,
68
+ content: `""`,
69
+ height: `24px`,
70
+ opacity: isDark ? 0 : 1,
71
+ position: `absolute`,
72
+ right: `-9px`,
73
+ top: `-9px`,
74
+ transform: `translate(${isDark ? `14px, -14px` : `0, 0`})`,
75
+ transition: `transform 0.45s ease`,
76
+ width: `24px`,
77
+ },
78
+ "&::after": {
79
+ borderRadius: `50%`,
80
+ boxShadow: (p) =>
81
+ `0 -23px 0 ${p.colors.toggleIcon}, 0 23px 0 ${p.colors.toggleIcon}, 23px 0 0 ${p.colors.toggleIcon}, -23px 0 0 ${p.colors.toggleIcon}, 15px 15px 0 ${p.colors.toggleIcon}, -15px 15px 0 ${p.colors.toggleIcon}, 15px -15px 0 ${p.colors.toggleIcon}, -15px -15px 0 ${p.colors.toggleIcon}`,
82
+ content: `""`,
83
+ height: `8px`,
84
+ left: `50%`,
85
+ margin: `-4px 0 0 -4px`,
86
+ position: ` absolute`,
87
+ top: `50%`,
88
+ width: `8px`,
89
+ transform: `scale(${isDark ? 1 : 0})`,
90
+ transition: `all 0.35s ease`,
91
+ },
92
+ }}
93
+ />
94
+ <div
95
+ sx={{
96
+ background: (p) => p.colors.MoonMask,
97
+ borderRadius: `50%`,
98
+ border: `0`,
99
+ height: `24px`,
100
+ opacity: isDark ? 0 : 1,
101
+ position: `absolute`,
102
+ right: 0,
103
+ top: 0,
104
+ transform: `translate(${isDark ? `14px, -14px` : `0, 0`})`,
105
+ transition: `background 0.25s ease, transform 0.45s ease`,
106
+ width: `24px`,
107
+ }}
108
+ />
109
+ </button>
188
110
  )
189
111
  }
190
112