@codecademy/gamut-styles 17.1.1-alpha.c4786d.0 → 17.1.1-alpha.d009df.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.
- package/dist/AssetProvider.d.ts +2 -3
- package/dist/AssetProvider.js +15 -18
- package/dist/Background.d.ts +1 -1
- package/dist/Background.js +28 -45
- package/dist/ColorMode.d.ts +229 -231
- package/dist/ColorMode.js +70 -77
- package/dist/GamutProvider.js +20 -22
- package/dist/cache/createEmotionCache.js +11 -26
- package/dist/cache/stylisPlugins/focusVisible.js +4 -4
- package/dist/globals/Reboot.d.ts +1 -2
- package/dist/globals/Reboot.js +4 -6
- package/dist/globals/Typography.d.ts +1 -2
- package/dist/globals/Typography.js +18 -20
- package/dist/globals/Variables.js +12 -21
- package/dist/remoteAssets/fonts.d.ts +1 -1
- package/dist/remoteAssets/fonts.js +8 -8
- package/dist/styles/boxShadow.js +10 -20
- package/dist/styles/fontSmoothing.d.ts +1 -1
- package/dist/styles/fontSmoothing.js +5 -7
- package/dist/styles/noSelect.js +1 -1
- package/dist/styles/pxRem.js +3 -3
- package/dist/styles/responsive.js +4 -6
- package/dist/styles/screenReaderOnly.js +2 -2
- package/dist/styles/transitionConcat.js +4 -4
- package/dist/themes/admin.d.ts +12 -12
- package/dist/themes/admin.js +1 -1
- package/dist/themes/core.d.ts +6 -6
- package/dist/themes/core.js +14 -12
- package/dist/themes/platform.d.ts +14 -14
- package/dist/themes/platform.js +1 -1
- package/dist/utilities/themed.js +4 -2
- package/dist/variables/borderRadii.js +1 -1
- package/dist/variables/colors.js +19 -18
- package/dist/variables/deprecated-colors.js +17 -16
- package/dist/variables/elements.js +1 -1
- package/dist/variables/responsive.js +4 -6
- package/dist/variables/spacing.js +1 -1
- package/dist/variables/timing.js +6 -6
- package/dist/variables/typography.js +14 -8
- package/dist/variance/config.js +49 -32
- package/dist/variance/index.js +1 -2
- package/dist/variance/props.d.ts +16 -16
- package/dist/variance/props.js +16 -16
- package/dist/variance/utils.d.ts +1 -1
- package/dist/variance/utils.js +6 -14
- package/package.json +3 -3
package/dist/variables/colors.js
CHANGED
|
@@ -1,19 +1,13 @@
|
|
|
1
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
2
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
3
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
6
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
7
1
|
import { flattenScale } from '@codecademy/variance';
|
|
8
2
|
import { rgba } from 'polished';
|
|
9
3
|
/**
|
|
10
4
|
* Core Colors
|
|
11
5
|
*/
|
|
12
6
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
7
|
+
const black = '#000000';
|
|
8
|
+
const white = '#ffffff';
|
|
9
|
+
const navy = '#10162F';
|
|
10
|
+
const effects = {
|
|
17
11
|
shadow: {
|
|
18
12
|
black: {
|
|
19
13
|
slight: rgba(black, 0.15),
|
|
@@ -25,7 +19,7 @@ var effects = {
|
|
|
25
19
|
}
|
|
26
20
|
}
|
|
27
21
|
};
|
|
28
|
-
export
|
|
22
|
+
export const coreSwatches = {
|
|
29
23
|
beige: {
|
|
30
24
|
'100': '#FFF0E5'
|
|
31
25
|
},
|
|
@@ -94,7 +88,7 @@ export var coreSwatches = {
|
|
|
94
88
|
'700': rgba(white, 0.8)
|
|
95
89
|
}
|
|
96
90
|
};
|
|
97
|
-
export
|
|
91
|
+
export const trueColors = {
|
|
98
92
|
beige: coreSwatches.beige[100],
|
|
99
93
|
blue: coreSwatches.blue[500],
|
|
100
94
|
green: coreSwatches.green[700],
|
|
@@ -111,16 +105,20 @@ export var trueColors = {
|
|
|
111
105
|
paleRed: coreSwatches.red[100],
|
|
112
106
|
red: coreSwatches.red[500],
|
|
113
107
|
yellow: coreSwatches.yellow[500],
|
|
114
|
-
black
|
|
115
|
-
white
|
|
108
|
+
black,
|
|
109
|
+
white
|
|
110
|
+
};
|
|
111
|
+
export const corePalette = {
|
|
112
|
+
...flattenScale(coreSwatches),
|
|
113
|
+
...flattenScale(effects),
|
|
114
|
+
...trueColors
|
|
116
115
|
};
|
|
117
|
-
export var corePalette = _objectSpread(_objectSpread(_objectSpread({}, flattenScale(coreSwatches)), flattenScale(effects)), trueColors);
|
|
118
116
|
|
|
119
117
|
/**
|
|
120
118
|
* Platform Colors
|
|
121
119
|
*/
|
|
122
120
|
|
|
123
|
-
export
|
|
121
|
+
export const platformSwatches = {
|
|
124
122
|
beige: {
|
|
125
123
|
'0': '#FFFBF8'
|
|
126
124
|
},
|
|
@@ -140,10 +138,13 @@ export var platformSwatches = {
|
|
|
140
138
|
'300': '#B3CCFF'
|
|
141
139
|
}
|
|
142
140
|
};
|
|
143
|
-
|
|
141
|
+
const truePlatformColors = {
|
|
144
142
|
lightBeige: platformSwatches.beige[0],
|
|
145
143
|
gold: platformSwatches.gold[800],
|
|
146
144
|
teal: platformSwatches.teal[500],
|
|
147
145
|
purple: platformSwatches.purple[300]
|
|
148
146
|
};
|
|
149
|
-
export
|
|
147
|
+
export const platformPalette = {
|
|
148
|
+
...flattenScale(platformSwatches),
|
|
149
|
+
...truePlatformColors
|
|
150
|
+
};
|
|
@@ -1,20 +1,18 @@
|
|
|
1
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
2
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
3
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
6
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
7
1
|
import { flattenScale } from '@codecademy/variance';
|
|
8
2
|
import { corePalette } from './colors';
|
|
9
|
-
|
|
10
|
-
|
|
3
|
+
const {
|
|
4
|
+
black,
|
|
5
|
+
white
|
|
6
|
+
} = corePalette;
|
|
7
|
+
|
|
11
8
|
/**
|
|
12
9
|
* @deprecated
|
|
13
10
|
* Using these variables directly is no longer supported.
|
|
14
11
|
*
|
|
15
12
|
* Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
|
|
16
13
|
*/
|
|
17
|
-
|
|
14
|
+
|
|
15
|
+
export const interactiveColors = {
|
|
18
16
|
dark: corePalette.hyper,
|
|
19
17
|
light: corePalette.yellow
|
|
20
18
|
};
|
|
@@ -26,7 +24,7 @@ export var interactiveColors = {
|
|
|
26
24
|
* Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
|
|
27
25
|
*/
|
|
28
26
|
|
|
29
|
-
export
|
|
27
|
+
export const editorColors = {
|
|
30
28
|
blue: '#83fff5',
|
|
31
29
|
deepPurple: '#cc7bc2',
|
|
32
30
|
gray: '#939598',
|
|
@@ -44,7 +42,7 @@ export var editorColors = {
|
|
|
44
42
|
* Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
|
|
45
43
|
*/
|
|
46
44
|
|
|
47
|
-
export
|
|
45
|
+
export const platformColors = {
|
|
48
46
|
mint: {
|
|
49
47
|
'500': '#37c3be',
|
|
50
48
|
'600': '#2c9c98',
|
|
@@ -69,7 +67,7 @@ export var platformColors = {
|
|
|
69
67
|
* Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
|
|
70
68
|
*/
|
|
71
69
|
|
|
72
|
-
export
|
|
70
|
+
export const swatches = {
|
|
73
71
|
beige: {
|
|
74
72
|
'0': '#FFF0E5'
|
|
75
73
|
},
|
|
@@ -125,7 +123,7 @@ export var swatches = {
|
|
|
125
123
|
* Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
|
|
126
124
|
*/
|
|
127
125
|
|
|
128
|
-
|
|
126
|
+
const trueColors = {
|
|
129
127
|
beige: swatches.beige[0],
|
|
130
128
|
blue: swatches.blue[500],
|
|
131
129
|
green: swatches.green[700],
|
|
@@ -141,8 +139,8 @@ var trueColors = {
|
|
|
141
139
|
pink: swatches.pink[400],
|
|
142
140
|
red: swatches.red[500],
|
|
143
141
|
yellow: swatches.yellow[500],
|
|
144
|
-
black
|
|
145
|
-
white
|
|
142
|
+
black,
|
|
143
|
+
white
|
|
146
144
|
};
|
|
147
145
|
|
|
148
146
|
/**
|
|
@@ -152,4 +150,7 @@ var trueColors = {
|
|
|
152
150
|
* Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
|
|
153
151
|
*/
|
|
154
152
|
|
|
155
|
-
export
|
|
153
|
+
export const colors = {
|
|
154
|
+
...flattenScale(swatches),
|
|
155
|
+
...trueColors
|
|
156
|
+
};
|
|
@@ -1,21 +1,19 @@
|
|
|
1
|
-
export
|
|
1
|
+
export const breakpoints = {
|
|
2
2
|
xs: '480px',
|
|
3
3
|
sm: '768px',
|
|
4
4
|
md: '1024px',
|
|
5
5
|
lg: '1200px',
|
|
6
6
|
xl: '1440px'
|
|
7
7
|
};
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
};
|
|
11
|
-
export var mediaQueries = {
|
|
8
|
+
const createMediaQuery = (size, direction) => `@media only screen and (${direction}-width: ${breakpoints[size]})`;
|
|
9
|
+
export const mediaQueries = {
|
|
12
10
|
xs: createMediaQuery('xs', 'min'),
|
|
13
11
|
sm: createMediaQuery('sm', 'min'),
|
|
14
12
|
md: createMediaQuery('md', 'min'),
|
|
15
13
|
lg: createMediaQuery('lg', 'min'),
|
|
16
14
|
xl: createMediaQuery('xl', 'min')
|
|
17
15
|
};
|
|
18
|
-
export
|
|
16
|
+
export const contentWidths = {
|
|
19
17
|
md: breakpoints.lg,
|
|
20
18
|
max: breakpoints.xl
|
|
21
19
|
};
|
package/dist/variables/timing.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
export
|
|
1
|
+
export const timingValues = {
|
|
2
2
|
fast: 150,
|
|
3
3
|
medium: 200,
|
|
4
4
|
base: 300,
|
|
5
5
|
slow: 350
|
|
6
6
|
};
|
|
7
|
-
export
|
|
8
|
-
fast:
|
|
9
|
-
medium:
|
|
10
|
-
base:
|
|
11
|
-
slow:
|
|
7
|
+
export const timing = {
|
|
8
|
+
fast: `${timingValues.fast}ms`,
|
|
9
|
+
medium: `${timingValues.medium}ms`,
|
|
10
|
+
base: `${timingValues.base}ms`,
|
|
11
|
+
slow: `${timingValues.slow}ms`
|
|
12
12
|
};
|
|
@@ -1,15 +1,21 @@
|
|
|
1
1
|
import { pxRem } from '../styles/pxRem';
|
|
2
|
-
export
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export
|
|
6
|
-
|
|
2
|
+
export const fontAccent = `"Suisse", "Apercu", -apple-system, BlinkMacSystemFont,
|
|
3
|
+
"Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
|
|
4
|
+
"Helvetica Neue", sans-serif`;
|
|
5
|
+
export const fontBase = `"Apercu", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
6
|
+
"Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
|
7
|
+
sans-serif`;
|
|
8
|
+
export const fontMonospace = `Monaco, Menlo, "Ubuntu Mono", "Droid Sans Mono", Consolas,
|
|
9
|
+
monospace`;
|
|
10
|
+
export const fontSystem = `-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu",
|
|
11
|
+
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif`;
|
|
12
|
+
export const fontFamily = {
|
|
7
13
|
accent: fontAccent,
|
|
8
14
|
base: fontBase,
|
|
9
15
|
monospace: fontMonospace,
|
|
10
16
|
system: fontSystem
|
|
11
17
|
};
|
|
12
|
-
export
|
|
18
|
+
export const fontSize = {
|
|
13
19
|
64: pxRem(64),
|
|
14
20
|
44: pxRem(44),
|
|
15
21
|
34: pxRem(34),
|
|
@@ -20,12 +26,12 @@ export var fontSize = {
|
|
|
20
26
|
16: pxRem(16),
|
|
21
27
|
14: pxRem(14)
|
|
22
28
|
};
|
|
23
|
-
export
|
|
29
|
+
export const lineHeight = {
|
|
24
30
|
base: 1.5,
|
|
25
31
|
spacedTitle: 1.3,
|
|
26
32
|
title: 1.2
|
|
27
33
|
};
|
|
28
|
-
export
|
|
34
|
+
export const fontWeight = {
|
|
29
35
|
base: 400,
|
|
30
36
|
title: 700,
|
|
31
37
|
700: 700,
|
package/dist/variance/config.js
CHANGED
|
@@ -1,11 +1,5 @@
|
|
|
1
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
2
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
3
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
6
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
7
1
|
import { transformSize } from '@codecademy/variance';
|
|
8
|
-
export
|
|
2
|
+
export const color = {
|
|
9
3
|
color: {
|
|
10
4
|
property: 'color',
|
|
11
5
|
scale: 'colors'
|
|
@@ -49,7 +43,7 @@ export var color = {
|
|
|
49
43
|
scale: 'colors'
|
|
50
44
|
}
|
|
51
45
|
};
|
|
52
|
-
export
|
|
46
|
+
export const border = {
|
|
53
47
|
// Border
|
|
54
48
|
border: {
|
|
55
49
|
property: 'border',
|
|
@@ -171,7 +165,7 @@ export var border = {
|
|
|
171
165
|
property: 'borderBottomStyle'
|
|
172
166
|
}
|
|
173
167
|
};
|
|
174
|
-
|
|
168
|
+
const selfAlignments = {
|
|
175
169
|
justifySelf: {
|
|
176
170
|
property: 'justifySelf'
|
|
177
171
|
},
|
|
@@ -182,7 +176,7 @@ var selfAlignments = {
|
|
|
182
176
|
property: 'gridArea'
|
|
183
177
|
}
|
|
184
178
|
};
|
|
185
|
-
|
|
179
|
+
const alignments = {
|
|
186
180
|
justifyContent: {
|
|
187
181
|
property: 'justifyContent'
|
|
188
182
|
},
|
|
@@ -194,9 +188,10 @@ var alignments = _objectSpread({
|
|
|
194
188
|
},
|
|
195
189
|
alignContent: {
|
|
196
190
|
property: 'alignContent'
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
|
|
191
|
+
},
|
|
192
|
+
...selfAlignments
|
|
193
|
+
};
|
|
194
|
+
const flexItems = {
|
|
200
195
|
flexBasis: {
|
|
201
196
|
property: 'flexBasis'
|
|
202
197
|
},
|
|
@@ -210,7 +205,7 @@ var flexItems = {
|
|
|
210
205
|
property: 'order'
|
|
211
206
|
}
|
|
212
207
|
};
|
|
213
|
-
export
|
|
208
|
+
export const flex = {
|
|
214
209
|
flexDirection: {
|
|
215
210
|
property: 'flexDirection'
|
|
216
211
|
},
|
|
@@ -219,9 +214,11 @@ export var flex = _objectSpread(_objectSpread({
|
|
|
219
214
|
},
|
|
220
215
|
flex: {
|
|
221
216
|
property: 'flex'
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
|
|
217
|
+
},
|
|
218
|
+
...alignments,
|
|
219
|
+
...flexItems
|
|
220
|
+
};
|
|
221
|
+
const gridItems = {
|
|
225
222
|
gridColumn: {
|
|
226
223
|
property: 'gridColumn'
|
|
227
224
|
},
|
|
@@ -241,7 +238,7 @@ var gridItems = {
|
|
|
241
238
|
property: 'gridRowEnd'
|
|
242
239
|
}
|
|
243
240
|
};
|
|
244
|
-
export
|
|
241
|
+
export const grid = {
|
|
245
242
|
gridAutoColumns: {
|
|
246
243
|
property: 'gridAutoColumns'
|
|
247
244
|
},
|
|
@@ -271,9 +268,11 @@ export var grid = _objectSpread(_objectSpread({
|
|
|
271
268
|
columnGap: {
|
|
272
269
|
property: 'columnGap',
|
|
273
270
|
scale: 'spacing'
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
|
|
271
|
+
},
|
|
272
|
+
...alignments,
|
|
273
|
+
...gridItems
|
|
274
|
+
};
|
|
275
|
+
export const background = {
|
|
277
276
|
background: {
|
|
278
277
|
property: 'background'
|
|
279
278
|
},
|
|
@@ -290,7 +289,7 @@ export var background = {
|
|
|
290
289
|
property: 'backgroundPosition'
|
|
291
290
|
}
|
|
292
291
|
};
|
|
293
|
-
export
|
|
292
|
+
export const positioning = {
|
|
294
293
|
position: {
|
|
295
294
|
property: 'position'
|
|
296
295
|
},
|
|
@@ -322,7 +321,7 @@ export var positioning = {
|
|
|
322
321
|
property: 'opacity'
|
|
323
322
|
}
|
|
324
323
|
};
|
|
325
|
-
export
|
|
324
|
+
export const shadows = {
|
|
326
325
|
boxShadow: {
|
|
327
326
|
property: 'boxShadow'
|
|
328
327
|
},
|
|
@@ -330,7 +329,7 @@ export var shadows = {
|
|
|
330
329
|
property: 'textShadow'
|
|
331
330
|
}
|
|
332
331
|
};
|
|
333
|
-
export
|
|
332
|
+
export const layout = {
|
|
334
333
|
display: {
|
|
335
334
|
property: 'display'
|
|
336
335
|
},
|
|
@@ -374,9 +373,12 @@ export var layout = _objectSpread(_objectSpread(_objectSpread({
|
|
|
374
373
|
},
|
|
375
374
|
verticalAlign: {
|
|
376
375
|
property: 'verticalAlign'
|
|
377
|
-
}
|
|
378
|
-
|
|
379
|
-
|
|
376
|
+
},
|
|
377
|
+
...selfAlignments,
|
|
378
|
+
...gridItems,
|
|
379
|
+
...flexItems
|
|
380
|
+
};
|
|
381
|
+
export const list = {
|
|
380
382
|
listStyle: {
|
|
381
383
|
property: 'listStyle'
|
|
382
384
|
},
|
|
@@ -390,7 +392,7 @@ export var list = {
|
|
|
390
392
|
property: 'listStyleImage'
|
|
391
393
|
}
|
|
392
394
|
};
|
|
393
|
-
export
|
|
395
|
+
export const typography = {
|
|
394
396
|
fontFamily: {
|
|
395
397
|
property: 'fontFamily',
|
|
396
398
|
scale: 'fontFamily'
|
|
@@ -426,7 +428,7 @@ export var typography = {
|
|
|
426
428
|
property: 'whiteSpace'
|
|
427
429
|
}
|
|
428
430
|
};
|
|
429
|
-
export
|
|
431
|
+
export const margin = {
|
|
430
432
|
m: {
|
|
431
433
|
property: 'margin',
|
|
432
434
|
scale: 'spacing'
|
|
@@ -458,7 +460,7 @@ export var margin = {
|
|
|
458
460
|
scale: 'spacing'
|
|
459
461
|
}
|
|
460
462
|
};
|
|
461
|
-
export
|
|
463
|
+
export const padding = {
|
|
462
464
|
p: {
|
|
463
465
|
property: 'padding',
|
|
464
466
|
scale: 'spacing'
|
|
@@ -490,5 +492,20 @@ export var padding = {
|
|
|
490
492
|
scale: 'spacing'
|
|
491
493
|
}
|
|
492
494
|
};
|
|
493
|
-
export
|
|
494
|
-
|
|
495
|
+
export const space = {
|
|
496
|
+
...margin,
|
|
497
|
+
...padding
|
|
498
|
+
};
|
|
499
|
+
export const all = {
|
|
500
|
+
...typography,
|
|
501
|
+
...space,
|
|
502
|
+
...shadows,
|
|
503
|
+
...grid,
|
|
504
|
+
...flex,
|
|
505
|
+
...layout,
|
|
506
|
+
...positioning,
|
|
507
|
+
...border,
|
|
508
|
+
...background,
|
|
509
|
+
...color,
|
|
510
|
+
...list
|
|
511
|
+
};
|
package/dist/variance/index.js
CHANGED
package/dist/variance/props.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/** General Prop Groups */
|
|
2
|
-
export declare const typography: import("
|
|
2
|
+
export declare const typography: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
|
|
3
3
|
readonly fontFamily: {
|
|
4
4
|
readonly property: "fontFamily";
|
|
5
5
|
readonly scale: "fontFamily";
|
|
@@ -35,7 +35,7 @@ export declare const typography: import("@codecademy/variance/dist/types/config"
|
|
|
35
35
|
readonly property: "whiteSpace";
|
|
36
36
|
};
|
|
37
37
|
}>>;
|
|
38
|
-
export declare const grid: import("
|
|
38
|
+
export declare const grid: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
|
|
39
39
|
readonly gridColumn: {
|
|
40
40
|
readonly property: "gridColumn";
|
|
41
41
|
};
|
|
@@ -106,7 +106,7 @@ export declare const grid: import("@codecademy/variance/dist/types/config").Pars
|
|
|
106
106
|
readonly scale: "spacing";
|
|
107
107
|
};
|
|
108
108
|
}>>;
|
|
109
|
-
export declare const flex: import("
|
|
109
|
+
export declare const flex: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
|
|
110
110
|
readonly flexBasis: {
|
|
111
111
|
readonly property: "flexBasis";
|
|
112
112
|
};
|
|
@@ -150,7 +150,7 @@ export declare const flex: import("@codecademy/variance/dist/types/config").Pars
|
|
|
150
150
|
readonly property: "flex";
|
|
151
151
|
};
|
|
152
152
|
}>>;
|
|
153
|
-
export declare const layout: import("
|
|
153
|
+
export declare const layout: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
|
|
154
154
|
readonly flexBasis: {
|
|
155
155
|
readonly property: "flexBasis";
|
|
156
156
|
};
|
|
@@ -235,7 +235,7 @@ export declare const layout: import("@codecademy/variance/dist/types/config").Pa
|
|
|
235
235
|
readonly property: "verticalAlign";
|
|
236
236
|
};
|
|
237
237
|
}>>;
|
|
238
|
-
export declare const positioning: import("
|
|
238
|
+
export declare const positioning: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
|
|
239
239
|
readonly position: {
|
|
240
240
|
readonly property: "position";
|
|
241
241
|
};
|
|
@@ -267,7 +267,7 @@ export declare const positioning: import("@codecademy/variance/dist/types/config
|
|
|
267
267
|
readonly property: "opacity";
|
|
268
268
|
};
|
|
269
269
|
}>>;
|
|
270
|
-
export declare const background: import("
|
|
270
|
+
export declare const background: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
|
|
271
271
|
readonly background: {
|
|
272
272
|
readonly property: "background";
|
|
273
273
|
};
|
|
@@ -284,7 +284,7 @@ export declare const background: import("@codecademy/variance/dist/types/config"
|
|
|
284
284
|
readonly property: "backgroundPosition";
|
|
285
285
|
};
|
|
286
286
|
}>>;
|
|
287
|
-
export declare const color: import("
|
|
287
|
+
export declare const color: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
|
|
288
288
|
readonly color: {
|
|
289
289
|
readonly property: "color";
|
|
290
290
|
readonly scale: "colors";
|
|
@@ -328,7 +328,7 @@ export declare const color: import("@codecademy/variance/dist/types/config").Par
|
|
|
328
328
|
readonly scale: "colors";
|
|
329
329
|
};
|
|
330
330
|
}>>;
|
|
331
|
-
export declare const shadow: import("
|
|
331
|
+
export declare const shadow: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
|
|
332
332
|
readonly boxShadow: {
|
|
333
333
|
readonly property: "boxShadow";
|
|
334
334
|
};
|
|
@@ -336,7 +336,7 @@ export declare const shadow: import("@codecademy/variance/dist/types/config").Pa
|
|
|
336
336
|
readonly property: "textShadow";
|
|
337
337
|
};
|
|
338
338
|
}>>;
|
|
339
|
-
export declare const space: import("
|
|
339
|
+
export declare const space: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
|
|
340
340
|
readonly p: {
|
|
341
341
|
readonly property: "padding";
|
|
342
342
|
readonly scale: "spacing";
|
|
@@ -398,7 +398,7 @@ export declare const space: import("@codecademy/variance/dist/types/config").Par
|
|
|
398
398
|
readonly scale: "spacing";
|
|
399
399
|
};
|
|
400
400
|
}>>;
|
|
401
|
-
export declare const border: import("
|
|
401
|
+
export declare const border: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
|
|
402
402
|
readonly border: {
|
|
403
403
|
readonly property: "border";
|
|
404
404
|
readonly scale: "borders";
|
|
@@ -516,7 +516,7 @@ export declare const border: import("@codecademy/variance/dist/types/config").Pa
|
|
|
516
516
|
readonly property: "borderBottomStyle";
|
|
517
517
|
};
|
|
518
518
|
}>>;
|
|
519
|
-
export declare const list: import("
|
|
519
|
+
export declare const list: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
|
|
520
520
|
readonly listStyle: {
|
|
521
521
|
readonly property: "listStyle";
|
|
522
522
|
};
|
|
@@ -531,7 +531,7 @@ export declare const list: import("@codecademy/variance/dist/types/config").Pars
|
|
|
531
531
|
};
|
|
532
532
|
}>>;
|
|
533
533
|
/** Sub Groups */
|
|
534
|
-
export declare const padding: import("
|
|
534
|
+
export declare const padding: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
|
|
535
535
|
readonly p: {
|
|
536
536
|
readonly property: "padding";
|
|
537
537
|
readonly scale: "spacing";
|
|
@@ -563,7 +563,7 @@ export declare const padding: import("@codecademy/variance/dist/types/config").P
|
|
|
563
563
|
readonly scale: "spacing";
|
|
564
564
|
};
|
|
565
565
|
}>>;
|
|
566
|
-
export declare const margin: import("
|
|
566
|
+
export declare const margin: import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
|
|
567
567
|
readonly m: {
|
|
568
568
|
readonly property: "margin";
|
|
569
569
|
readonly scale: "spacing";
|
|
@@ -596,7 +596,7 @@ export declare const margin: import("@codecademy/variance/dist/types/config").Pa
|
|
|
596
596
|
};
|
|
597
597
|
}>>;
|
|
598
598
|
/** CSS */
|
|
599
|
-
export declare const css: import("
|
|
599
|
+
export declare const css: import("packages/variance/dist/types/config").CSS<import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
|
|
600
600
|
listStyle: {
|
|
601
601
|
readonly property: "listStyle";
|
|
602
602
|
};
|
|
@@ -1047,7 +1047,7 @@ export declare const css: import("@codecademy/variance/dist/types/config").CSS<i
|
|
|
1047
1047
|
readonly property: "whiteSpace";
|
|
1048
1048
|
};
|
|
1049
1049
|
}>>>;
|
|
1050
|
-
export declare const variant: import("
|
|
1050
|
+
export declare const variant: import("packages/variance/dist/types/config").Variant<import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
|
|
1051
1051
|
listStyle: {
|
|
1052
1052
|
readonly property: "listStyle";
|
|
1053
1053
|
};
|
|
@@ -1498,7 +1498,7 @@ export declare const variant: import("@codecademy/variance/dist/types/config").V
|
|
|
1498
1498
|
readonly property: "whiteSpace";
|
|
1499
1499
|
};
|
|
1500
1500
|
}>>>;
|
|
1501
|
-
export declare const states: import("
|
|
1501
|
+
export declare const states: import("packages/variance/dist/types/config").States<import("packages/variance/dist/types/config").Parser<import("packages/variance/dist/types/config").TransformerMap<{
|
|
1502
1502
|
listStyle: {
|
|
1503
1503
|
readonly property: "listStyle";
|
|
1504
1504
|
};
|
package/dist/variance/props.js
CHANGED
|
@@ -2,23 +2,23 @@ import { variance } from '@codecademy/variance';
|
|
|
2
2
|
import * as PROPERTIES from './config';
|
|
3
3
|
|
|
4
4
|
/** General Prop Groups */
|
|
5
|
-
export
|
|
6
|
-
export
|
|
7
|
-
export
|
|
8
|
-
export
|
|
9
|
-
export
|
|
10
|
-
export
|
|
11
|
-
export
|
|
12
|
-
export
|
|
13
|
-
export
|
|
14
|
-
export
|
|
15
|
-
export
|
|
5
|
+
export const typography = variance.create(PROPERTIES.typography);
|
|
6
|
+
export const grid = variance.create(PROPERTIES.grid);
|
|
7
|
+
export const flex = variance.create(PROPERTIES.flex);
|
|
8
|
+
export const layout = variance.create(PROPERTIES.layout);
|
|
9
|
+
export const positioning = variance.create(PROPERTIES.positioning);
|
|
10
|
+
export const background = variance.create(PROPERTIES.background);
|
|
11
|
+
export const color = variance.create(PROPERTIES.color);
|
|
12
|
+
export const shadow = variance.create(PROPERTIES.shadows);
|
|
13
|
+
export const space = variance.create(PROPERTIES.space);
|
|
14
|
+
export const border = variance.create(PROPERTIES.border);
|
|
15
|
+
export const list = variance.create(PROPERTIES.list);
|
|
16
16
|
|
|
17
17
|
/** Sub Groups */
|
|
18
|
-
export
|
|
19
|
-
export
|
|
18
|
+
export const padding = variance.create(PROPERTIES.padding);
|
|
19
|
+
export const margin = variance.create(PROPERTIES.margin);
|
|
20
20
|
|
|
21
21
|
/** CSS */
|
|
22
|
-
export
|
|
23
|
-
export
|
|
24
|
-
export
|
|
22
|
+
export const css = variance.createCss(PROPERTIES.all);
|
|
23
|
+
export const variant = variance.createVariant(PROPERTIES.all);
|
|
24
|
+
export const states = variance.createStates(PROPERTIES.all);
|