@pingux/astro 1.13.0-alpha.3 → 1.13.0-alpha.4
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.
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
6
|
+
|
|
7
|
+
var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
|
|
8
|
+
|
|
9
|
+
var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
|
|
10
|
+
|
|
11
|
+
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
|
12
|
+
|
|
13
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
14
|
+
|
|
15
|
+
var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
|
|
16
|
+
|
|
17
|
+
var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
|
|
18
|
+
|
|
19
|
+
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
|
20
|
+
|
|
21
|
+
_Object$defineProperty(exports, "__esModule", {
|
|
22
|
+
value: true
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
exports["default"] = void 0;
|
|
26
|
+
|
|
27
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
|
28
|
+
|
|
29
|
+
var _themeUi = require("theme-ui");
|
|
30
|
+
|
|
31
|
+
var _chromaJs = _interopRequireDefault(require("chroma-js"));
|
|
32
|
+
|
|
33
|
+
var _theme = _interopRequireDefault(require("../../theme"));
|
|
34
|
+
|
|
35
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
36
|
+
|
|
37
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
38
|
+
|
|
39
|
+
var scaleFont = 1.2;
|
|
40
|
+
var borderRadius = 4;
|
|
41
|
+
var focusStyles = {
|
|
42
|
+
boxShadow: 'none',
|
|
43
|
+
outline: '1px solid #000000',
|
|
44
|
+
outlineOffset: 2,
|
|
45
|
+
outlineColor: 'active'
|
|
46
|
+
};
|
|
47
|
+
var inputFocusStyles = {
|
|
48
|
+
borderColor: 'active',
|
|
49
|
+
outline: '4px solid #000000',
|
|
50
|
+
outlineColor: 'accent.90'
|
|
51
|
+
};
|
|
52
|
+
var baseButton = {
|
|
53
|
+
borderRadius: borderRadius,
|
|
54
|
+
fontWeight: 400,
|
|
55
|
+
height: '50px',
|
|
56
|
+
'&.is-hovered': {
|
|
57
|
+
boxShadow: 'none',
|
|
58
|
+
color: 'white',
|
|
59
|
+
bg: 'activeDark'
|
|
60
|
+
},
|
|
61
|
+
'&.is-pressed': {
|
|
62
|
+
bg: 'activeDarker'
|
|
63
|
+
},
|
|
64
|
+
'&:focus-visible': focusStyles,
|
|
65
|
+
'&.is-focused': focusStyles
|
|
66
|
+
};
|
|
67
|
+
var linkStyles = {
|
|
68
|
+
'&.is-hovered': {
|
|
69
|
+
color: 'activeDark'
|
|
70
|
+
},
|
|
71
|
+
'&.is-pressed': {
|
|
72
|
+
color: 'activeDarker'
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
var modifyTheme = {
|
|
76
|
+
buttons: {
|
|
77
|
+
"default": _objectSpread({
|
|
78
|
+
color: 'active'
|
|
79
|
+
}, baseButton),
|
|
80
|
+
primary: _objectSpread({}, baseButton)
|
|
81
|
+
},
|
|
82
|
+
colors: {
|
|
83
|
+
activeDark: (0, _chromaJs["default"])(_theme["default"].colors.active).darken(0.5).hex(),
|
|
84
|
+
activeDarker: (0, _chromaJs["default"])(_theme["default"].colors.active).darken(1).hex()
|
|
85
|
+
},
|
|
86
|
+
fontSizes: {
|
|
87
|
+
xs: scaleFont * _theme["default"].fontSizes.xs,
|
|
88
|
+
sm: scaleFont * _theme["default"].fontSizes.sm,
|
|
89
|
+
md: scaleFont * _theme["default"].fontSizes.md,
|
|
90
|
+
lg: scaleFont * _theme["default"].fontSizes.lg,
|
|
91
|
+
xl: scaleFont * _theme["default"].fontSizes.xl,
|
|
92
|
+
xx: scaleFont * _theme["default"].fontSizes.xx,
|
|
93
|
+
xxx: '48px'
|
|
94
|
+
},
|
|
95
|
+
forms: {
|
|
96
|
+
input: {
|
|
97
|
+
fontSize: 'md',
|
|
98
|
+
borderRadius: borderRadius,
|
|
99
|
+
height: '50px',
|
|
100
|
+
'&:focus': inputFocusStyles,
|
|
101
|
+
primary: _objectSpread(_objectSpread({}, _theme["default"].forms.input), {}, {
|
|
102
|
+
borderRadius: borderRadius,
|
|
103
|
+
fontSize: 'xxx',
|
|
104
|
+
borderColor: 'neutral.60',
|
|
105
|
+
height: '75px',
|
|
106
|
+
textAlign: 'center',
|
|
107
|
+
letterSpacing: '12px',
|
|
108
|
+
fontWeight: 'bold',
|
|
109
|
+
'&:focus': inputFocusStyles
|
|
110
|
+
})
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
links: {
|
|
114
|
+
web: linkStyles,
|
|
115
|
+
app: linkStyles
|
|
116
|
+
},
|
|
117
|
+
text: {
|
|
118
|
+
title: {
|
|
119
|
+
fontWeight: 700
|
|
120
|
+
},
|
|
121
|
+
footer: {
|
|
122
|
+
color: 'text.secondary',
|
|
123
|
+
fontSize: 'xs'
|
|
124
|
+
},
|
|
125
|
+
label: {
|
|
126
|
+
color: 'text.primary'
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
variants: {
|
|
130
|
+
boxes: {
|
|
131
|
+
card: {
|
|
132
|
+
borderRadius: borderRadius,
|
|
133
|
+
flexGrow: [1, 0],
|
|
134
|
+
maxWidth: _theme["default"].breakpoints[0],
|
|
135
|
+
bg: 'white',
|
|
136
|
+
alignItems: 'stretch',
|
|
137
|
+
py: [0, 'xl'],
|
|
138
|
+
my: 'auto',
|
|
139
|
+
boxShadow: ['none', _theme["default"].variants.boxes.card.boxShadow],
|
|
140
|
+
width: ['100%', '450px'],
|
|
141
|
+
minHeight: 'fit-content'
|
|
142
|
+
},
|
|
143
|
+
wrapper: {
|
|
144
|
+
alignItems: 'center',
|
|
145
|
+
justifyContent: 'space-between',
|
|
146
|
+
bg: ['white', 'accent.99'],
|
|
147
|
+
py: 'lg',
|
|
148
|
+
gap: 'lg',
|
|
149
|
+
overflow: 'auto',
|
|
150
|
+
position: 'absolute',
|
|
151
|
+
top: 0,
|
|
152
|
+
bottom: 0,
|
|
153
|
+
left: 0,
|
|
154
|
+
right: 0
|
|
155
|
+
},
|
|
156
|
+
cardBody: {
|
|
157
|
+
flexGrow: [1, 0]
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
var _default = (0, _themeUi.merge)(_theme["default"], modifyTheme);
|
|
164
|
+
|
|
165
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
6
|
+
|
|
7
|
+
_Object$defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
_Object$defineProperty(exports, "default", {
|
|
12
|
+
enumerable: true,
|
|
13
|
+
get: function get() {
|
|
14
|
+
return _astroNano["default"];
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
var _astroNano = _interopRequireDefault(require("./astro-nano"));
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
|
|
2
|
+
import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
|
|
3
|
+
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
|
4
|
+
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
|
|
5
|
+
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
|
6
|
+
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
|
7
|
+
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
|
8
|
+
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
|
9
|
+
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
|
10
|
+
|
|
11
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
12
|
+
|
|
13
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
14
|
+
|
|
15
|
+
import { merge } from 'theme-ui';
|
|
16
|
+
import chroma from 'chroma-js';
|
|
17
|
+
import astroTheme from '../../theme';
|
|
18
|
+
var scaleFont = 1.2;
|
|
19
|
+
var borderRadius = 4;
|
|
20
|
+
var focusStyles = {
|
|
21
|
+
boxShadow: 'none',
|
|
22
|
+
outline: '1px solid #000000',
|
|
23
|
+
outlineOffset: 2,
|
|
24
|
+
outlineColor: 'active'
|
|
25
|
+
};
|
|
26
|
+
var inputFocusStyles = {
|
|
27
|
+
borderColor: 'active',
|
|
28
|
+
outline: '4px solid #000000',
|
|
29
|
+
outlineColor: 'accent.90'
|
|
30
|
+
};
|
|
31
|
+
var baseButton = {
|
|
32
|
+
borderRadius: borderRadius,
|
|
33
|
+
fontWeight: 400,
|
|
34
|
+
height: '50px',
|
|
35
|
+
'&.is-hovered': {
|
|
36
|
+
boxShadow: 'none',
|
|
37
|
+
color: 'white',
|
|
38
|
+
bg: 'activeDark'
|
|
39
|
+
},
|
|
40
|
+
'&.is-pressed': {
|
|
41
|
+
bg: 'activeDarker'
|
|
42
|
+
},
|
|
43
|
+
'&:focus-visible': focusStyles,
|
|
44
|
+
'&.is-focused': focusStyles
|
|
45
|
+
};
|
|
46
|
+
var linkStyles = {
|
|
47
|
+
'&.is-hovered': {
|
|
48
|
+
color: 'activeDark'
|
|
49
|
+
},
|
|
50
|
+
'&.is-pressed': {
|
|
51
|
+
color: 'activeDarker'
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
var modifyTheme = {
|
|
55
|
+
buttons: {
|
|
56
|
+
"default": _objectSpread({
|
|
57
|
+
color: 'active'
|
|
58
|
+
}, baseButton),
|
|
59
|
+
primary: _objectSpread({}, baseButton)
|
|
60
|
+
},
|
|
61
|
+
colors: {
|
|
62
|
+
activeDark: chroma(astroTheme.colors.active).darken(0.5).hex(),
|
|
63
|
+
activeDarker: chroma(astroTheme.colors.active).darken(1).hex()
|
|
64
|
+
},
|
|
65
|
+
fontSizes: {
|
|
66
|
+
xs: scaleFont * astroTheme.fontSizes.xs,
|
|
67
|
+
sm: scaleFont * astroTheme.fontSizes.sm,
|
|
68
|
+
md: scaleFont * astroTheme.fontSizes.md,
|
|
69
|
+
lg: scaleFont * astroTheme.fontSizes.lg,
|
|
70
|
+
xl: scaleFont * astroTheme.fontSizes.xl,
|
|
71
|
+
xx: scaleFont * astroTheme.fontSizes.xx,
|
|
72
|
+
xxx: '48px'
|
|
73
|
+
},
|
|
74
|
+
forms: {
|
|
75
|
+
input: {
|
|
76
|
+
fontSize: 'md',
|
|
77
|
+
borderRadius: borderRadius,
|
|
78
|
+
height: '50px',
|
|
79
|
+
'&:focus': inputFocusStyles,
|
|
80
|
+
primary: _objectSpread(_objectSpread({}, astroTheme.forms.input), {}, {
|
|
81
|
+
borderRadius: borderRadius,
|
|
82
|
+
fontSize: 'xxx',
|
|
83
|
+
borderColor: 'neutral.60',
|
|
84
|
+
height: '75px',
|
|
85
|
+
textAlign: 'center',
|
|
86
|
+
letterSpacing: '12px',
|
|
87
|
+
fontWeight: 'bold',
|
|
88
|
+
'&:focus': inputFocusStyles
|
|
89
|
+
})
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
links: {
|
|
93
|
+
web: linkStyles,
|
|
94
|
+
app: linkStyles
|
|
95
|
+
},
|
|
96
|
+
text: {
|
|
97
|
+
title: {
|
|
98
|
+
fontWeight: 700
|
|
99
|
+
},
|
|
100
|
+
footer: {
|
|
101
|
+
color: 'text.secondary',
|
|
102
|
+
fontSize: 'xs'
|
|
103
|
+
},
|
|
104
|
+
label: {
|
|
105
|
+
color: 'text.primary'
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
variants: {
|
|
109
|
+
boxes: {
|
|
110
|
+
card: {
|
|
111
|
+
borderRadius: borderRadius,
|
|
112
|
+
flexGrow: [1, 0],
|
|
113
|
+
maxWidth: astroTheme.breakpoints[0],
|
|
114
|
+
bg: 'white',
|
|
115
|
+
alignItems: 'stretch',
|
|
116
|
+
py: [0, 'xl'],
|
|
117
|
+
my: 'auto',
|
|
118
|
+
boxShadow: ['none', astroTheme.variants.boxes.card.boxShadow],
|
|
119
|
+
width: ['100%', '450px'],
|
|
120
|
+
minHeight: 'fit-content'
|
|
121
|
+
},
|
|
122
|
+
wrapper: {
|
|
123
|
+
alignItems: 'center',
|
|
124
|
+
justifyContent: 'space-between',
|
|
125
|
+
bg: ['white', 'accent.99'],
|
|
126
|
+
py: 'lg',
|
|
127
|
+
gap: 'lg',
|
|
128
|
+
overflow: 'auto',
|
|
129
|
+
position: 'absolute',
|
|
130
|
+
top: 0,
|
|
131
|
+
bottom: 0,
|
|
132
|
+
left: 0,
|
|
133
|
+
right: 0
|
|
134
|
+
},
|
|
135
|
+
cardBody: {
|
|
136
|
+
flexGrow: [1, 0]
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
};
|
|
141
|
+
export default merge(astroTheme, modifyTheme);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './astro-nano';
|