@bundle-stats/ui 4.1.1-alpha.1 → 4.1.1-alpha.3
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/lib/css/variables.css
CHANGED
|
@@ -23,42 +23,42 @@
|
|
|
23
23
|
--size-xxlarge: 1.424rem;
|
|
24
24
|
--size-xxxlarge: 1.602rem;
|
|
25
25
|
|
|
26
|
-
--line-height: 1.
|
|
26
|
+
--line-height: 1.66em;
|
|
27
27
|
|
|
28
28
|
/*
|
|
29
29
|
* Color scheme:
|
|
30
|
-
* https://coolors.co/
|
|
31
|
-
* http://mcg.mbitson.com/#!?mcgpalette0=%
|
|
30
|
+
* https://coolors.co/287acc-da444e-55b950-f6e179-192339
|
|
31
|
+
* http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23f6e179&mcgpalette3=%23505861&mcgpalette4=%23287acc&themename=mcgtheme
|
|
32
32
|
*/
|
|
33
|
-
--color-gray-25: #
|
|
34
|
-
--color-gray-50: #
|
|
35
|
-
--color-gray-100: #
|
|
36
|
-
--color-gray-200: #
|
|
37
|
-
--color-gray-300: #
|
|
38
|
-
--color-gray-400: #
|
|
39
|
-
--color-gray-500: #
|
|
40
|
-
--color-gray-600: #
|
|
41
|
-
--color-gray-700: #
|
|
42
|
-
--color-gray-800: #
|
|
43
|
-
--color-gray-900: #
|
|
33
|
+
--color-gray-25: #f3f3f4;
|
|
34
|
+
--color-gray-50 : #eaebec;
|
|
35
|
+
--color-gray-100: #cbcdd0;
|
|
36
|
+
--color-gray-200: #a8acb0;
|
|
37
|
+
--color-gray-300: #858a90;
|
|
38
|
+
--color-gray-400: #6a7179;
|
|
39
|
+
--color-gray-500: #505861;
|
|
40
|
+
--color-gray-600: #495059;
|
|
41
|
+
--color-gray-700: #40474f;
|
|
42
|
+
--color-gray-800: #373d45;
|
|
43
|
+
--color-gray-900: #272d33;
|
|
44
44
|
|
|
45
45
|
--color-gray-ultra-light: var(--color-gray-200);
|
|
46
46
|
--color-gray-light: var(--color-gray-300);
|
|
47
47
|
--color-gray: var(--color-gray-500);
|
|
48
|
-
--color-gray-dark: var(--color-gray-
|
|
49
|
-
--color-gray-ultra-dark: var(--color-gray-
|
|
48
|
+
--color-gray-dark: var(--color-gray-700);
|
|
49
|
+
--color-gray-ultra-dark: var(--color-gray-900);
|
|
50
50
|
|
|
51
51
|
--color-red-25: #fdf5f6;
|
|
52
|
-
--color-red-50: #
|
|
53
|
-
--color-red-100: #
|
|
54
|
-
--color-red-200: #
|
|
55
|
-
--color-red-300: #
|
|
56
|
-
--color-red-400: #
|
|
57
|
-
--color-red-500: #
|
|
58
|
-
--color-red-600: #
|
|
59
|
-
--color-red-700: #
|
|
60
|
-
--color-red-800: #
|
|
61
|
-
--color-red-900: #
|
|
52
|
+
--color-red-50: #fbe9ea;
|
|
53
|
+
--color-red-100: #f4c7ca;
|
|
54
|
+
--color-red-200: #eda2a7;
|
|
55
|
+
--color-red-300: #e57c83;
|
|
56
|
+
--color-red-400: #e06069;
|
|
57
|
+
--color-red-500: #da444e;
|
|
58
|
+
--color-red-600: #d63e47;
|
|
59
|
+
--color-red-700: #d0353d;
|
|
60
|
+
--color-red-800: #cb2d35;
|
|
61
|
+
--color-red-900: #c21f25;
|
|
62
62
|
--color-red-ultra-light: var(--color-red-100);
|
|
63
63
|
--color-red-light: var(--color-red-300);
|
|
64
64
|
--color-red: var(--color-red-500);
|
|
@@ -66,16 +66,16 @@
|
|
|
66
66
|
--color-red-ultra-dark: var(--color-red-900);
|
|
67
67
|
|
|
68
68
|
--color-blue-25: #f3f8fd;
|
|
69
|
-
--color-blue-50: #
|
|
70
|
-
--color-blue-100: #
|
|
71
|
-
--color-blue-200: #
|
|
72
|
-
--color-blue-300: #
|
|
73
|
-
--color-blue-400: #
|
|
74
|
-
--color-blue-500: #
|
|
75
|
-
--color-blue-600: #
|
|
76
|
-
--color-blue-700: #
|
|
77
|
-
--color-blue-800: #
|
|
78
|
-
--color-blue-900: #
|
|
69
|
+
--color-blue-50: #e5eff9;
|
|
70
|
+
--color-blue-100: #bfd7f0;
|
|
71
|
+
--color-blue-200: #94bde6;
|
|
72
|
+
--color-blue-300: #69a2db;
|
|
73
|
+
--color-blue-400: #488ed4;
|
|
74
|
+
--color-blue-500: #287acc;
|
|
75
|
+
--color-blue-600: #2472c7;
|
|
76
|
+
--color-blue-700: #1e67c0;
|
|
77
|
+
--color-blue-800: #185db9;
|
|
78
|
+
--color-blue-900: #0f4aad;
|
|
79
79
|
|
|
80
80
|
--color-blue-ultra-light: var(--color-blue-100);
|
|
81
81
|
--color-blue-light: var(--color-blue-300);
|
|
@@ -84,16 +84,16 @@
|
|
|
84
84
|
--color-blue-ultra-dark: var(--color-blue-900);
|
|
85
85
|
|
|
86
86
|
--color-green-25: #f6fbf6;
|
|
87
|
-
--color-green-50: #
|
|
88
|
-
--color-green-100: #
|
|
89
|
-
--color-green-200: #
|
|
90
|
-
--color-green-300: #
|
|
91
|
-
--color-green-400: #
|
|
92
|
-
--color-green-500: #
|
|
93
|
-
--color-green-600: #
|
|
94
|
-
--color-green-700: #
|
|
95
|
-
--color-green-800: #
|
|
96
|
-
--color-green-900: #
|
|
87
|
+
--color-green-50: #ebf7ea;
|
|
88
|
+
--color-green-100: #cceacb;
|
|
89
|
+
--color-green-200: #aadca8;
|
|
90
|
+
--color-green-300: #88ce85;
|
|
91
|
+
--color-green-400: #6fc46a;
|
|
92
|
+
--color-green-500: #55b950;
|
|
93
|
+
--color-green-600: #4eb249;
|
|
94
|
+
--color-green-700: #44aa40;
|
|
95
|
+
--color-green-800: #3ba237;
|
|
96
|
+
--color-green-900: #2a9327;
|
|
97
97
|
|
|
98
98
|
--color-green-ultra-light: var(--color-green-100);
|
|
99
99
|
--color-green-light: var(--color-green-300);
|
|
@@ -102,16 +102,16 @@
|
|
|
102
102
|
--color-green-ultra-dark: var(--color-green-900);
|
|
103
103
|
|
|
104
104
|
--color-yellow-25: #FFFDF2;
|
|
105
|
-
--color-yellow-50: #
|
|
106
|
-
--color-yellow-100: #
|
|
107
|
-
--color-yellow-200: #
|
|
108
|
-
--color-yellow-300: #
|
|
109
|
-
--color-yellow-400: #
|
|
110
|
-
--color-yellow-500: #
|
|
111
|
-
--color-yellow-600: #
|
|
112
|
-
--color-yellow-700: #
|
|
113
|
-
--color-yellow-800: #
|
|
114
|
-
--color-yellow-900: #
|
|
105
|
+
--color-yellow-50: #fefbef;
|
|
106
|
+
--color-yellow-100: #fcf6d7;
|
|
107
|
+
--color-yellow-200: #fbf0bc;
|
|
108
|
+
--color-yellow-300: #f9eaa1;
|
|
109
|
+
--color-yellow-400: #f7e68d;
|
|
110
|
+
--color-yellow-500: #f6e179;
|
|
111
|
+
--color-yellow-600: #f5dd71;
|
|
112
|
+
--color-yellow-700: #f3d966;
|
|
113
|
+
--color-yellow-800: #f2d55c;
|
|
114
|
+
--color-yellow-900: #efcd49;
|
|
115
115
|
|
|
116
116
|
--color-yellow-light-background: var(--color-yellow-25);
|
|
117
117
|
--color-yellow-ultra-light: var(--color-yellow-100);
|
|
@@ -10,6 +10,8 @@ var _stories = require("../stories");
|
|
|
10
10
|
|
|
11
11
|
var _layout = require("../layout");
|
|
12
12
|
|
|
13
|
+
var _chartColors = _interopRequireDefault(require("../chart-colors.json"));
|
|
14
|
+
|
|
13
15
|
var _typography = _interopRequireDefault(require("./typography.md"));
|
|
14
16
|
|
|
15
17
|
var _typographyModule = _interopRequireDefault(require("./typography.module.css"));
|
|
@@ -54,6 +56,19 @@ var Item = function Item(_ref) {
|
|
|
54
56
|
flex: '1 1 20%'
|
|
55
57
|
}
|
|
56
58
|
}, "".concat(colorName, " ").concat(valueName));
|
|
59
|
+
}; // eslint-disable-next-line react/prop-types
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
var ItemColorValue = function ItemColorValue(_ref2) {
|
|
63
|
+
var value = _ref2.value;
|
|
64
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
65
|
+
style: {
|
|
66
|
+
background: value,
|
|
67
|
+
color: 'var(--color-light)',
|
|
68
|
+
padding: '12px',
|
|
69
|
+
flex: '1 1 20%'
|
|
70
|
+
}
|
|
71
|
+
}, value);
|
|
57
72
|
};
|
|
58
73
|
|
|
59
74
|
var COLORS = ['blue', 'red', 'green', 'yellow', 'gray'];
|
|
@@ -82,5 +97,16 @@ stories.add('color sheme', function () {
|
|
|
82
97
|
valueName: valueName
|
|
83
98
|
});
|
|
84
99
|
}));
|
|
85
|
-
}))
|
|
100
|
+
}), /*#__PURE__*/_react["default"].createElement("hr", null), /*#__PURE__*/_react["default"].createElement("h3", null, "Chart colors"), /*#__PURE__*/_react["default"].createElement("div", {
|
|
101
|
+
style: {
|
|
102
|
+
display: 'flex',
|
|
103
|
+
marginBottom: '24px',
|
|
104
|
+
flexWrap: 'wrap'
|
|
105
|
+
}
|
|
106
|
+
}, _chartColors["default"].map(function (color) {
|
|
107
|
+
return /*#__PURE__*/_react["default"].createElement(ItemColorValue, {
|
|
108
|
+
key: color,
|
|
109
|
+
value: color
|
|
110
|
+
});
|
|
111
|
+
})));
|
|
86
112
|
});
|
|
@@ -23,42 +23,42 @@
|
|
|
23
23
|
--size-xxlarge: 1.424rem;
|
|
24
24
|
--size-xxxlarge: 1.602rem;
|
|
25
25
|
|
|
26
|
-
--line-height: 1.
|
|
26
|
+
--line-height: 1.66em;
|
|
27
27
|
|
|
28
28
|
/*
|
|
29
29
|
* Color scheme:
|
|
30
|
-
* https://coolors.co/
|
|
31
|
-
* http://mcg.mbitson.com/#!?mcgpalette0=%
|
|
30
|
+
* https://coolors.co/287acc-da444e-55b950-f6e179-192339
|
|
31
|
+
* http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23f6e179&mcgpalette3=%23505861&mcgpalette4=%23287acc&themename=mcgtheme
|
|
32
32
|
*/
|
|
33
|
-
--color-gray-25: #
|
|
34
|
-
--color-gray-50: #
|
|
35
|
-
--color-gray-100: #
|
|
36
|
-
--color-gray-200: #
|
|
37
|
-
--color-gray-300: #
|
|
38
|
-
--color-gray-400: #
|
|
39
|
-
--color-gray-500: #
|
|
40
|
-
--color-gray-600: #
|
|
41
|
-
--color-gray-700: #
|
|
42
|
-
--color-gray-800: #
|
|
43
|
-
--color-gray-900: #
|
|
33
|
+
--color-gray-25: #f3f3f4;
|
|
34
|
+
--color-gray-50 : #eaebec;
|
|
35
|
+
--color-gray-100: #cbcdd0;
|
|
36
|
+
--color-gray-200: #a8acb0;
|
|
37
|
+
--color-gray-300: #858a90;
|
|
38
|
+
--color-gray-400: #6a7179;
|
|
39
|
+
--color-gray-500: #505861;
|
|
40
|
+
--color-gray-600: #495059;
|
|
41
|
+
--color-gray-700: #40474f;
|
|
42
|
+
--color-gray-800: #373d45;
|
|
43
|
+
--color-gray-900: #272d33;
|
|
44
44
|
|
|
45
45
|
--color-gray-ultra-light: var(--color-gray-200);
|
|
46
46
|
--color-gray-light: var(--color-gray-300);
|
|
47
47
|
--color-gray: var(--color-gray-500);
|
|
48
|
-
--color-gray-dark: var(--color-gray-
|
|
49
|
-
--color-gray-ultra-dark: var(--color-gray-
|
|
48
|
+
--color-gray-dark: var(--color-gray-700);
|
|
49
|
+
--color-gray-ultra-dark: var(--color-gray-900);
|
|
50
50
|
|
|
51
51
|
--color-red-25: #fdf5f6;
|
|
52
|
-
--color-red-50: #
|
|
53
|
-
--color-red-100: #
|
|
54
|
-
--color-red-200: #
|
|
55
|
-
--color-red-300: #
|
|
56
|
-
--color-red-400: #
|
|
57
|
-
--color-red-500: #
|
|
58
|
-
--color-red-600: #
|
|
59
|
-
--color-red-700: #
|
|
60
|
-
--color-red-800: #
|
|
61
|
-
--color-red-900: #
|
|
52
|
+
--color-red-50: #fbe9ea;
|
|
53
|
+
--color-red-100: #f4c7ca;
|
|
54
|
+
--color-red-200: #eda2a7;
|
|
55
|
+
--color-red-300: #e57c83;
|
|
56
|
+
--color-red-400: #e06069;
|
|
57
|
+
--color-red-500: #da444e;
|
|
58
|
+
--color-red-600: #d63e47;
|
|
59
|
+
--color-red-700: #d0353d;
|
|
60
|
+
--color-red-800: #cb2d35;
|
|
61
|
+
--color-red-900: #c21f25;
|
|
62
62
|
--color-red-ultra-light: var(--color-red-100);
|
|
63
63
|
--color-red-light: var(--color-red-300);
|
|
64
64
|
--color-red: var(--color-red-500);
|
|
@@ -66,16 +66,16 @@
|
|
|
66
66
|
--color-red-ultra-dark: var(--color-red-900);
|
|
67
67
|
|
|
68
68
|
--color-blue-25: #f3f8fd;
|
|
69
|
-
--color-blue-50: #
|
|
70
|
-
--color-blue-100: #
|
|
71
|
-
--color-blue-200: #
|
|
72
|
-
--color-blue-300: #
|
|
73
|
-
--color-blue-400: #
|
|
74
|
-
--color-blue-500: #
|
|
75
|
-
--color-blue-600: #
|
|
76
|
-
--color-blue-700: #
|
|
77
|
-
--color-blue-800: #
|
|
78
|
-
--color-blue-900: #
|
|
69
|
+
--color-blue-50: #e5eff9;
|
|
70
|
+
--color-blue-100: #bfd7f0;
|
|
71
|
+
--color-blue-200: #94bde6;
|
|
72
|
+
--color-blue-300: #69a2db;
|
|
73
|
+
--color-blue-400: #488ed4;
|
|
74
|
+
--color-blue-500: #287acc;
|
|
75
|
+
--color-blue-600: #2472c7;
|
|
76
|
+
--color-blue-700: #1e67c0;
|
|
77
|
+
--color-blue-800: #185db9;
|
|
78
|
+
--color-blue-900: #0f4aad;
|
|
79
79
|
|
|
80
80
|
--color-blue-ultra-light: var(--color-blue-100);
|
|
81
81
|
--color-blue-light: var(--color-blue-300);
|
|
@@ -84,16 +84,16 @@
|
|
|
84
84
|
--color-blue-ultra-dark: var(--color-blue-900);
|
|
85
85
|
|
|
86
86
|
--color-green-25: #f6fbf6;
|
|
87
|
-
--color-green-50: #
|
|
88
|
-
--color-green-100: #
|
|
89
|
-
--color-green-200: #
|
|
90
|
-
--color-green-300: #
|
|
91
|
-
--color-green-400: #
|
|
92
|
-
--color-green-500: #
|
|
93
|
-
--color-green-600: #
|
|
94
|
-
--color-green-700: #
|
|
95
|
-
--color-green-800: #
|
|
96
|
-
--color-green-900: #
|
|
87
|
+
--color-green-50: #ebf7ea;
|
|
88
|
+
--color-green-100: #cceacb;
|
|
89
|
+
--color-green-200: #aadca8;
|
|
90
|
+
--color-green-300: #88ce85;
|
|
91
|
+
--color-green-400: #6fc46a;
|
|
92
|
+
--color-green-500: #55b950;
|
|
93
|
+
--color-green-600: #4eb249;
|
|
94
|
+
--color-green-700: #44aa40;
|
|
95
|
+
--color-green-800: #3ba237;
|
|
96
|
+
--color-green-900: #2a9327;
|
|
97
97
|
|
|
98
98
|
--color-green-ultra-light: var(--color-green-100);
|
|
99
99
|
--color-green-light: var(--color-green-300);
|
|
@@ -102,16 +102,16 @@
|
|
|
102
102
|
--color-green-ultra-dark: var(--color-green-900);
|
|
103
103
|
|
|
104
104
|
--color-yellow-25: #FFFDF2;
|
|
105
|
-
--color-yellow-50: #
|
|
106
|
-
--color-yellow-100: #
|
|
107
|
-
--color-yellow-200: #
|
|
108
|
-
--color-yellow-300: #
|
|
109
|
-
--color-yellow-400: #
|
|
110
|
-
--color-yellow-500: #
|
|
111
|
-
--color-yellow-600: #
|
|
112
|
-
--color-yellow-700: #
|
|
113
|
-
--color-yellow-800: #
|
|
114
|
-
--color-yellow-900: #
|
|
105
|
+
--color-yellow-50: #fefbef;
|
|
106
|
+
--color-yellow-100: #fcf6d7;
|
|
107
|
+
--color-yellow-200: #fbf0bc;
|
|
108
|
+
--color-yellow-300: #f9eaa1;
|
|
109
|
+
--color-yellow-400: #f7e68d;
|
|
110
|
+
--color-yellow-500: #f6e179;
|
|
111
|
+
--color-yellow-600: #f5dd71;
|
|
112
|
+
--color-yellow-700: #f3d966;
|
|
113
|
+
--color-yellow-800: #f2d55c;
|
|
114
|
+
--color-yellow-900: #efcd49;
|
|
115
115
|
|
|
116
116
|
--color-yellow-light-background: var(--color-yellow-25);
|
|
117
117
|
--color-yellow-ultra-light: var(--color-yellow-100);
|
|
@@ -3,6 +3,7 @@ import { storiesOf } from '@storybook/react';
|
|
|
3
3
|
import { Container, Logo } from '../ui';
|
|
4
4
|
import { getWrapperDecorator } from '../stories';
|
|
5
5
|
import { Header, SubHeader } from '../layout';
|
|
6
|
+
import CHART_COLORS from '../chart-colors.json';
|
|
6
7
|
import content from './typography.md';
|
|
7
8
|
import css from './typography.module.css';
|
|
8
9
|
const stories = storiesOf('Prototypes/Styleguide', module);
|
|
@@ -40,6 +41,21 @@ const Item = _ref => {
|
|
|
40
41
|
flex: '1 1 20%'
|
|
41
42
|
}
|
|
42
43
|
}, `${colorName} ${valueName}`);
|
|
44
|
+
}; // eslint-disable-next-line react/prop-types
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
const ItemColorValue = _ref2 => {
|
|
48
|
+
let {
|
|
49
|
+
value
|
|
50
|
+
} = _ref2;
|
|
51
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
52
|
+
style: {
|
|
53
|
+
background: value,
|
|
54
|
+
color: 'var(--color-light)',
|
|
55
|
+
padding: '12px',
|
|
56
|
+
flex: '1 1 20%'
|
|
57
|
+
}
|
|
58
|
+
}, value);
|
|
43
59
|
};
|
|
44
60
|
|
|
45
61
|
const COLORS = ['blue', 'red', 'green', 'yellow', 'gray'];
|
|
@@ -63,4 +79,13 @@ stories.add('color sheme', () => /*#__PURE__*/React.createElement(Container, nul
|
|
|
63
79
|
key: `${colorName}-${valueName}`,
|
|
64
80
|
colorName: colorName,
|
|
65
81
|
valueName: valueName
|
|
66
|
-
}))))))
|
|
82
|
+
})))), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement("h3", null, "Chart colors"), /*#__PURE__*/React.createElement("div", {
|
|
83
|
+
style: {
|
|
84
|
+
display: 'flex',
|
|
85
|
+
marginBottom: '24px',
|
|
86
|
+
flexWrap: 'wrap'
|
|
87
|
+
}
|
|
88
|
+
}, CHART_COLORS.map(color => /*#__PURE__*/React.createElement(ItemColorValue, {
|
|
89
|
+
key: color,
|
|
90
|
+
value: color
|
|
91
|
+
})))));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bundle-stats/ui",
|
|
3
|
-
"version": "4.1.1-alpha.
|
|
3
|
+
"version": "4.1.1-alpha.3",
|
|
4
4
|
"description": "UI components for BundleStats projects.",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-esm/index.js",
|
|
@@ -85,12 +85,12 @@
|
|
|
85
85
|
"react-router-dom": "^5.0.0"
|
|
86
86
|
},
|
|
87
87
|
"dependencies": {
|
|
88
|
-
"@bundle-stats/utils": "^4.1.1-alpha.
|
|
88
|
+
"@bundle-stats/utils": "^4.1.1-alpha.3",
|
|
89
89
|
"ariakit": "^2.0.0-next.41",
|
|
90
90
|
"date-fns": "^2.28.0",
|
|
91
91
|
"modern-css-reset": "^1.4.0",
|
|
92
92
|
"query-string": "^7.1.0",
|
|
93
93
|
"use-query-params": "^2.0.0"
|
|
94
94
|
},
|
|
95
|
-
"gitHead": "
|
|
95
|
+
"gitHead": "26d4de037b639a94fb76c82e970c39305e00adda"
|
|
96
96
|
}
|
package/src/css/variables.css
CHANGED
|
@@ -23,42 +23,42 @@
|
|
|
23
23
|
--size-xxlarge: 1.424rem;
|
|
24
24
|
--size-xxxlarge: 1.602rem;
|
|
25
25
|
|
|
26
|
-
--line-height: 1.
|
|
26
|
+
--line-height: 1.66em;
|
|
27
27
|
|
|
28
28
|
/*
|
|
29
29
|
* Color scheme:
|
|
30
|
-
* https://coolors.co/
|
|
31
|
-
* http://mcg.mbitson.com/#!?mcgpalette0=%
|
|
30
|
+
* https://coolors.co/287acc-da444e-55b950-f6e179-192339
|
|
31
|
+
* http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23f6e179&mcgpalette3=%23505861&mcgpalette4=%23287acc&themename=mcgtheme
|
|
32
32
|
*/
|
|
33
|
-
--color-gray-25: #
|
|
34
|
-
--color-gray-50: #
|
|
35
|
-
--color-gray-100: #
|
|
36
|
-
--color-gray-200: #
|
|
37
|
-
--color-gray-300: #
|
|
38
|
-
--color-gray-400: #
|
|
39
|
-
--color-gray-500: #
|
|
40
|
-
--color-gray-600: #
|
|
41
|
-
--color-gray-700: #
|
|
42
|
-
--color-gray-800: #
|
|
43
|
-
--color-gray-900: #
|
|
33
|
+
--color-gray-25: #f3f3f4;
|
|
34
|
+
--color-gray-50 : #eaebec;
|
|
35
|
+
--color-gray-100: #cbcdd0;
|
|
36
|
+
--color-gray-200: #a8acb0;
|
|
37
|
+
--color-gray-300: #858a90;
|
|
38
|
+
--color-gray-400: #6a7179;
|
|
39
|
+
--color-gray-500: #505861;
|
|
40
|
+
--color-gray-600: #495059;
|
|
41
|
+
--color-gray-700: #40474f;
|
|
42
|
+
--color-gray-800: #373d45;
|
|
43
|
+
--color-gray-900: #272d33;
|
|
44
44
|
|
|
45
45
|
--color-gray-ultra-light: var(--color-gray-200);
|
|
46
46
|
--color-gray-light: var(--color-gray-300);
|
|
47
47
|
--color-gray: var(--color-gray-500);
|
|
48
|
-
--color-gray-dark: var(--color-gray-
|
|
49
|
-
--color-gray-ultra-dark: var(--color-gray-
|
|
48
|
+
--color-gray-dark: var(--color-gray-700);
|
|
49
|
+
--color-gray-ultra-dark: var(--color-gray-900);
|
|
50
50
|
|
|
51
51
|
--color-red-25: #fdf5f6;
|
|
52
|
-
--color-red-50: #
|
|
53
|
-
--color-red-100: #
|
|
54
|
-
--color-red-200: #
|
|
55
|
-
--color-red-300: #
|
|
56
|
-
--color-red-400: #
|
|
57
|
-
--color-red-500: #
|
|
58
|
-
--color-red-600: #
|
|
59
|
-
--color-red-700: #
|
|
60
|
-
--color-red-800: #
|
|
61
|
-
--color-red-900: #
|
|
52
|
+
--color-red-50: #fbe9ea;
|
|
53
|
+
--color-red-100: #f4c7ca;
|
|
54
|
+
--color-red-200: #eda2a7;
|
|
55
|
+
--color-red-300: #e57c83;
|
|
56
|
+
--color-red-400: #e06069;
|
|
57
|
+
--color-red-500: #da444e;
|
|
58
|
+
--color-red-600: #d63e47;
|
|
59
|
+
--color-red-700: #d0353d;
|
|
60
|
+
--color-red-800: #cb2d35;
|
|
61
|
+
--color-red-900: #c21f25;
|
|
62
62
|
--color-red-ultra-light: var(--color-red-100);
|
|
63
63
|
--color-red-light: var(--color-red-300);
|
|
64
64
|
--color-red: var(--color-red-500);
|
|
@@ -66,16 +66,16 @@
|
|
|
66
66
|
--color-red-ultra-dark: var(--color-red-900);
|
|
67
67
|
|
|
68
68
|
--color-blue-25: #f3f8fd;
|
|
69
|
-
--color-blue-50: #
|
|
70
|
-
--color-blue-100: #
|
|
71
|
-
--color-blue-200: #
|
|
72
|
-
--color-blue-300: #
|
|
73
|
-
--color-blue-400: #
|
|
74
|
-
--color-blue-500: #
|
|
75
|
-
--color-blue-600: #
|
|
76
|
-
--color-blue-700: #
|
|
77
|
-
--color-blue-800: #
|
|
78
|
-
--color-blue-900: #
|
|
69
|
+
--color-blue-50: #e5eff9;
|
|
70
|
+
--color-blue-100: #bfd7f0;
|
|
71
|
+
--color-blue-200: #94bde6;
|
|
72
|
+
--color-blue-300: #69a2db;
|
|
73
|
+
--color-blue-400: #488ed4;
|
|
74
|
+
--color-blue-500: #287acc;
|
|
75
|
+
--color-blue-600: #2472c7;
|
|
76
|
+
--color-blue-700: #1e67c0;
|
|
77
|
+
--color-blue-800: #185db9;
|
|
78
|
+
--color-blue-900: #0f4aad;
|
|
79
79
|
|
|
80
80
|
--color-blue-ultra-light: var(--color-blue-100);
|
|
81
81
|
--color-blue-light: var(--color-blue-300);
|
|
@@ -84,16 +84,16 @@
|
|
|
84
84
|
--color-blue-ultra-dark: var(--color-blue-900);
|
|
85
85
|
|
|
86
86
|
--color-green-25: #f6fbf6;
|
|
87
|
-
--color-green-50: #
|
|
88
|
-
--color-green-100: #
|
|
89
|
-
--color-green-200: #
|
|
90
|
-
--color-green-300: #
|
|
91
|
-
--color-green-400: #
|
|
92
|
-
--color-green-500: #
|
|
93
|
-
--color-green-600: #
|
|
94
|
-
--color-green-700: #
|
|
95
|
-
--color-green-800: #
|
|
96
|
-
--color-green-900: #
|
|
87
|
+
--color-green-50: #ebf7ea;
|
|
88
|
+
--color-green-100: #cceacb;
|
|
89
|
+
--color-green-200: #aadca8;
|
|
90
|
+
--color-green-300: #88ce85;
|
|
91
|
+
--color-green-400: #6fc46a;
|
|
92
|
+
--color-green-500: #55b950;
|
|
93
|
+
--color-green-600: #4eb249;
|
|
94
|
+
--color-green-700: #44aa40;
|
|
95
|
+
--color-green-800: #3ba237;
|
|
96
|
+
--color-green-900: #2a9327;
|
|
97
97
|
|
|
98
98
|
--color-green-ultra-light: var(--color-green-100);
|
|
99
99
|
--color-green-light: var(--color-green-300);
|
|
@@ -102,16 +102,16 @@
|
|
|
102
102
|
--color-green-ultra-dark: var(--color-green-900);
|
|
103
103
|
|
|
104
104
|
--color-yellow-25: #FFFDF2;
|
|
105
|
-
--color-yellow-50: #
|
|
106
|
-
--color-yellow-100: #
|
|
107
|
-
--color-yellow-200: #
|
|
108
|
-
--color-yellow-300: #
|
|
109
|
-
--color-yellow-400: #
|
|
110
|
-
--color-yellow-500: #
|
|
111
|
-
--color-yellow-600: #
|
|
112
|
-
--color-yellow-700: #
|
|
113
|
-
--color-yellow-800: #
|
|
114
|
-
--color-yellow-900: #
|
|
105
|
+
--color-yellow-50: #fefbef;
|
|
106
|
+
--color-yellow-100: #fcf6d7;
|
|
107
|
+
--color-yellow-200: #fbf0bc;
|
|
108
|
+
--color-yellow-300: #f9eaa1;
|
|
109
|
+
--color-yellow-400: #f7e68d;
|
|
110
|
+
--color-yellow-500: #f6e179;
|
|
111
|
+
--color-yellow-600: #f5dd71;
|
|
112
|
+
--color-yellow-700: #f3d966;
|
|
113
|
+
--color-yellow-800: #f2d55c;
|
|
114
|
+
--color-yellow-900: #efcd49;
|
|
115
115
|
|
|
116
116
|
--color-yellow-light-background: var(--color-yellow-25);
|
|
117
117
|
--color-yellow-ultra-light: var(--color-yellow-100);
|