jbx 2.0.1 → 2.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 (4) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/index.js +4 -52
  3. package/package.json +1 -1
  4. package/style.css +52 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,8 @@
1
+ # 2.1.0
2
+
3
+ - Restore `input` and `range`.
4
+ - Export `Component`.
5
+
1
6
  # 2.0.1
2
7
 
3
8
  - Restore responsive text size.
package/index.js CHANGED
@@ -6,7 +6,7 @@ const SIZE = window.innerWidth > 1280 ? 16 : window.innerWidth > 640 ? 14 : 12;
6
6
  const BASE_RADIUS = SIZE / 2;
7
7
  const BASE_FONT_SIZE = SIZE;
8
8
 
9
- function Component(className, styleSrc, config = {}) {
9
+ export function Component(className, styleSrc, config = {}) {
10
10
  const { element = `div`, styleProps } = config;
11
11
 
12
12
  return function MakeComponent({ children, ...props }) {
@@ -39,56 +39,8 @@ export const SmallText = Component(`jbx-small-text`);
39
39
 
40
40
  export const Button = Component(`jbx-button`, {}, { element: 'button' });
41
41
 
42
- // export const Input = Styled.input({
43
- // '-webkit-text-fill-color': '#777',
44
- // opacity: 1,
45
- // flex: 1,
46
- // display: 'block',
47
- // appearance: 'none',
48
- // border: 'none',
49
- // borderRadius: 0,
50
- // height: SPACE * 2.5,
51
- // backgroundColor: '#eee',
52
- // ...textProps({
53
- // capHeight: (BASE_FONT_SIZE * 3) / 3
54
- // }),
55
- // padding: `0 ${SPACE / 2}px`,
56
- // boxShadow: `inset rgba(0, 0, 0, 0.04) 3px 3px 0, inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0`,
57
- // color: '#777'
58
- // });
59
-
60
- // export const Range = Styled.input({
61
- // flex: 1,
62
- // width: '100%',
63
- // appearance: 'none',
64
- // backgroundColor: 'var(--accent-color)',
65
- // height: SPACE,
66
- // borderRadius: 0,
67
- // '&::-webkit-slider-thumb': {
68
- // appearance: 'none',
69
- // boxShadow: 'none',
70
- // borderRadius: 0,
71
- // height: SPACE * 2,
72
- // width: SPACE,
73
- // backgroundColor: '#000',
74
- // border: 'none'
75
- // },
76
- // '&::-moz-range-thumb': {
77
- // appearance: 'none',
78
- // boxShadow: 'none',
79
- // borderRadius: 0,
80
- // height: SPACE * 2,
81
- // width: SPACE,
82
- // backgroundColor: '#000',
83
- // border: 'none'
84
- // },
85
- // '&::-webkit-slider-runnable-track': {
86
- // appearance: 'none'
87
- // },
88
- // ':focus': {
89
- // outline: 'none'
90
- // }
91
- // });
42
+ export const Input = Component(`jbx-input`, null, { element: 'input' });
43
+ export const Range = Component(`jbx-range`, null, { element: 'input' });
92
44
 
93
45
  export const HeaderH1 = Component(`jbx-h${1}`, null, { element: 'h1' });
94
46
  export const HeaderH2 = Component(`jbx-h${2}`, null, { element: 'h2' });
@@ -130,7 +82,7 @@ export const Space = Component(`jbx-space`, (props) => ({
130
82
  width: `${SIZE * props.w}px`
131
83
  }));
132
84
 
133
- export const Box = Component(`jbx-box`, ({ hideOnSmall, flex, minWidth }) => {
85
+ export const Box = Component(`jbx-box`, ({ padding, hideOnSmall, flex, minWidth }) => {
134
86
  return {
135
87
  flex,
136
88
  minWidth,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jbx",
3
- "version": "2.0.1",
3
+ "version": "2.1.0",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "hi@javier.xyz",
package/style.css CHANGED
@@ -49,7 +49,8 @@ body {
49
49
  /* base text */
50
50
  html,
51
51
  body,
52
- .jbx-button {
52
+ .jbx-button,
53
+ .jbx-input {
53
54
  font-size: var(--base-font-size);
54
55
  line-height: 1;
55
56
  }
@@ -103,7 +104,7 @@ body,
103
104
  line-height: 1;
104
105
  padding: 0;
105
106
  margin: 0;
106
- font-weight: 400;
107
+ font-weight: 600;
107
108
  }
108
109
 
109
110
  .jbx-h4 {
@@ -147,3 +148,52 @@ body,
147
148
  flex-wrap: wrap;
148
149
  flex-direction: column;
149
150
  }
151
+
152
+ .jbx-input {
153
+ color: #777;
154
+ -webkit-text-fill-color: #777;
155
+ opacity: 1;
156
+ flex: 1;
157
+ display: block;
158
+ appearance: none;
159
+ border: none;
160
+ border-radius: 0;
161
+ height: calc(var(--size) * 2.5);
162
+ background-color: #eee;
163
+ padding: 0 calc(var(--size) * 0.5);
164
+ box-shadow: inset rgba(0, 0, 0, 0.04) 3px 3px 0, inset rgba(0, 0, 0, 0.03) 0.5px 0.5px 0;
165
+ }
166
+
167
+ .jbx-range {
168
+ flex: 1;
169
+ width: 100%;
170
+ appearance: none;
171
+ background-color: var(--accent-color);
172
+ height: var(--size);
173
+ border-radius: 0;
174
+ }
175
+
176
+ .jbx-range::-webkit-slider-thumb {
177
+ appearance: none;
178
+ box-shadow: none;
179
+ border-radius: 0;
180
+ height: calc(var(--size) * 2);
181
+ width: var(--size);
182
+ background-color: #000;
183
+ border: none;
184
+ }
185
+ .jbx-range::-moz-range-thumb {
186
+ appearance: none;
187
+ box-shadow: none;
188
+ border-radius: 0;
189
+ height: calc(var(--size) * 2);
190
+ width: var(--size);
191
+ background-color: #000;
192
+ border: none;
193
+ }
194
+ .jbx-range::-webkit-slider-runnable-track {
195
+ appearance: none;
196
+ }
197
+ .jbx-range:focus {
198
+ outline: none;
199
+ }