@t2ca/gatsby-theme-showcase 1.2.4 → 1.2.6

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/color-mode-toggle.js +58 -136
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@t2ca/gatsby-theme-showcase",
3
- "version": "1.2.4",
3
+ "version": "1.2.6",
4
4
  "main": "index.js",
5
5
  "license": "MIT",
6
6
  "devDependencies": {
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,83 +22,90 @@ const ColorModeToggle = () => {
107
22
  }
108
23
 
109
24
  return (
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
25
  <button
26
+ aria-label={isDark ? `Activate light mode` : `Activate dark mode`}
120
27
  onClick={toggleColorMode}
121
- type="button"
122
- aria-label={isDark ? `Activate Light mode` : `Activate Dark mode`}
123
- title={isDark ? `Activate Light mode` : `Activate Dark mode`}
28
+ title={isDark ? `Activate light mode` : `Activate dark mode`}
124
29
  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`,
30
+ padding: 0,
31
+ appearance: `none`,
135
32
  outline: `none`,
136
- background: `none`,
33
+ alignItems: `center`,
34
+ background: `transparent`,
35
+ borderRadius: `5px`,
36
+ border: 0,
137
37
  cursor: `pointer`,
38
+ display: `inline-flex`,
39
+ height: `40px`,
40
+ justifyContent: `center`,
41
+ opacity: 0.75,
42
+ overflow: `hidden`,
43
+ position: `relative`,
138
44
  transform: `scale(0.75)`,
139
- padding: 0,
140
- appearance: `none`,
141
- "&:hover, &:focus": { opacity: 1 },
45
+ transition: `opacity 0.3s ease`,
46
+ verticalAlign: `middle`,
47
+ width: `40px`,
48
+ "&:hover": { opacity: 1 },
142
49
  }}
143
50
  >
144
51
  <div
145
52
  sx={{
146
- position: `relative`,
147
- width: `24px`,
148
- height: `24px`,
53
+ border: (p) =>
54
+ isDark
55
+ ? `4px solid ${p.colors.toggleIcon}`
56
+ : `2px solid ${p.colors.toggleIcon}`,
57
+ background: (p) => p.colors.toggleIcon,
149
58
  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`,
59
+ height: `24px`,
154
60
  overflow: isDark ? `visible` : `hidden`,
155
- boxShadow: (t) =>
156
- isDark ? `none` : `inset 8px -8px 0px 0px ${t.colors.toggleIcon}`,
157
- "&:before": {
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}`,
158
68
  content: `""`,
69
+ height: `24px`,
70
+ opacity: isDark ? 0 : 1,
159
71
  position: `absolute`,
160
72
  right: `-9px`,
161
73
  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,
74
+ transform: `translate(${isDark ? `14px, -14px` : `0, 0`})`,
169
75
  transition: `transform 0.45s ease`,
76
+ width: `24px`,
170
77
  },
171
- "&:after": {
78
+ "&::after": {
79
+ borderRadius: `50%`,
80
+ boxShadow: (t) =>
81
+ `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}`,
172
82
  content: `""`,
173
- width: `8px`,
174
83
  height: `8px`,
175
- borderRadius: `50%`,
84
+ left: `50%`,
176
85
  margin: `-4px 0 0 -4px`,
177
- position: `absolute`,
86
+ position: ` absolute`,
178
87
  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)`,
88
+ width: `8px`,
89
+ transform: `scale(${isDark ? 1 : 0})`,
183
90
  transition: `all 0.35s ease`,
184
91
  },
185
92
  }}
186
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
+ />
187
109
  </button>
188
110
  )
189
111
  }