@steroidsjs/bootstrap 2.1.1 → 2.1.5

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 (13) hide show
  1. package/form/Button/ButtonView.scss +1 -1
  2. package/form/DateField/DateFieldView.scss +2 -3
  3. package/form/DateTimeField/DateTimeFieldView.scss +1 -1
  4. package/form/DropDownField/DropDownFieldView.js +30 -17
  5. package/form/DropDownField/DropDownFieldView.scss +22 -7
  6. package/form/FieldList/FieldListView.js +8 -6
  7. package/form/NumberField/NumberFieldView.js +10 -12
  8. package/nav/Breadcrubms/BreadcrumbsView.d.ts +1 -2
  9. package/nav/Breadcrubms/BreadcrumbsView.js +1 -1
  10. package/nav/Breadcrubms/BreadcrumbsView.scss +1 -0
  11. package/nav/Nav/NavIconView.js +1 -1
  12. package/package.json +2 -2
  13. package/scss/variables/colors.scss +38 -38
package/form/Button/ButtonView.scss CHANGED
@@ -59,7 +59,7 @@
59
59
 
60
60
  &_link {
61
61
  justify-content: flex-start;
62
- background-color: #fff;
62
+ background-color: transparent;
63
63
  }
64
64
 
65
65
  &__icon {
package/form/DateField/DateFieldView.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  .DateFieldView {
2
2
  $root: &;
3
3
 
4
- padding: 0 8px;
4
+ padding-right: 8px;
5
5
  position: relative;
6
6
 
7
7
  background-color: $white;
@@ -46,8 +46,7 @@
46
46
  border: none;
47
47
  outline: none;
48
48
  background-color: transparent;
49
-
50
- padding: 10px 5px;
49
+ padding: $input-padding-y $input-padding-x;
51
50
  }
52
51
 
53
52
  &__icon-container {
package/form/DateTimeField/DateTimeFieldView.scss CHANGED
@@ -53,7 +53,7 @@
53
53
  outline: none;
54
54
  background-color: transparent;
55
55
 
56
- padding: 10px 5px;
56
+ padding: $input-padding-y $input-padding-x;
57
57
  }
58
58
 
59
59
  &__icon-container {
package/form/DropDownField/DropDownFieldView.js CHANGED
@@ -29,10 +29,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
29
29
  __setModuleDefault(result, mod);
30
30
  return result;
31
31
  };
32
+ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
33
+ for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
34
+ to[j] = from[i];
35
+ return to;
36
+ };
32
37
  exports.__esModule = true;
33
38
  var React = __importStar(require("react"));
34
39
  var react_1 = require("react");
35
40
  var hooks_1 = require("@steroidsjs/core/hooks");
41
+ var useDataSelect_1 = require("@steroidsjs/core/hooks/useDataSelect");
36
42
  function DropDownFieldView(props) {
37
43
  var inputRef = react_1.useRef(null);
38
44
  // Auto focus on search
@@ -41,6 +47,22 @@ function DropDownFieldView(props) {
41
47
  inputRef.current.focus();
42
48
  }
43
49
  }, [props.isAutoComplete, props.isOpened, props.isSearchAutoFocus]);
50
+ var renderItem = function (item, level) {
51
+ if (level === void 0) { level = 0; }
52
+ if (props.groupAttribute && Array.isArray(item[props.groupAttribute])) {
53
+ return __spreadArray([
54
+ (React.createElement("div", { key: String(item[props.primaryKey]), className: bem.element('drop-down-item', 'group') }, item.label))
55
+ ], item[props.groupAttribute].map(function (subItem) { return renderItem(subItem, level + 1); }));
56
+ }
57
+ return (React.createElement("div", { key: String(item[props.primaryKey]), className: bem.element('drop-down-item', {
58
+ hover: props.hoveredId === item[props.primaryKey],
59
+ select: props.selectedIds.includes(item[props.primaryKey]),
60
+ level: level
61
+ }), onClick: function (e) {
62
+ e.preventDefault();
63
+ props.onItemSelect(item[props.primaryKey]);
64
+ }, onFocus: function () { return props.onItemHover(item[props.primaryKey]); }, onMouseOver: function () { return props.onItemHover(item[props.primaryKey]); } }, item.label));
65
+ };
44
66
  var bem = hooks_1.useBem('DropDownFieldView');
45
67
  return (React.createElement("div", { ref: props.forwardedRef, className: bem(bem.block({ size: props.size }), props.className), style: props.style },
46
68
  React.createElement("div", { className: bem.element('selected-items', {
@@ -48,11 +70,11 @@ function DropDownFieldView(props) {
48
70
  'no-border': props.noBorder,
49
71
  'is-invalid': !!props.errors,
50
72
  disabled: props.disabled
51
- }), onClick: props.onOpen, onKeyPress: props.onOpen, tabIndex: 0, role: 'button' }, props.multiple
52
- ? props.selectedIds
53
- .map(function (id) { return props.items.find(function (item) { return item[props.primaryKey] === id; }); })
54
- .filter(Boolean)
55
- .map(function (item) { return (React.createElement("span", { key: String(item.id), className: bem.element('selected-item-multiple') },
73
+ }), onClick: props.onOpen, onKeyPress: props.onOpen, tabIndex: 0, role: 'button' }, props.selectedIds
74
+ .map(function (id) { return useDataSelect_1.getLinearItems(props.items, props.groupAttribute).find(function (item) { return item[props.primaryKey] === id; }); })
75
+ .filter(Boolean)
76
+ .map(function (item) { return (props.multiple
77
+ ? (React.createElement("span", { key: String(item.id), className: bem.element('selected-item-multiple') },
56
78
  item.label,
57
79
  React.createElement("span", { className: bem.element('selected-item-multiple-remove'), onClick: function (e) {
58
80
  e.preventDefault();
@@ -64,21 +86,12 @@ function DropDownFieldView(props) {
64
86
  props.onItemRemove(item[props.primaryKey]);
65
87
  }, tabIndex: 0, role: 'button' },
66
88
  React.createElement("svg", { viewBox: "64 64 896 896", className: "", width: "1em", height: "1em" },
67
- React.createElement("path", { d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3\n 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4\n 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3\n 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" }))))); })
68
- : props.selectedIds
69
- .map(function (id) { return props.items.find(function (item) { return item[props.primaryKey] === id; }); })
70
- .filter(Boolean)
71
- .map(function (item) { return (React.createElement("span", { key: item.id, className: bem.element('selected-item') }, item.label)); })),
89
+ React.createElement("path", { d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3\n 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4\n 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3\n 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" })))))
90
+ : (React.createElement("span", { key: item.id, className: bem.element('selected-item') }, item.label))); })),
72
91
  props.showReset && props.selectedIds.length > 0 && (React.createElement("button", { className: bem.element('reset'), onClick: props.onReset, "aria-label": __('Сбросить') })),
73
92
  props.isOpened && (React.createElement("div", { className: bem.element('drop-down') },
74
93
  props.isAutoComplete && (React.createElement("div", { className: bem.element('search') },
75
94
  React.createElement("input", __assign({}, props.searchInputProps, { ref: inputRef, onChange: function (e) { return props.searchInputProps.onChange(e.target.value); }, className: bem('form-control', 'form-control-' + props.size, bem.element('search-input'), props.searchInputProps.className) })))),
76
- React.createElement("div", { className: bem.element('drop-down-list') }, props.items.map(function (item) { return (React.createElement("button", { key: String(item[props.primaryKey]), type: 'button', className: bem.element('drop-down-item', {
77
- hover: props.hoveredId === item[props.primaryKey],
78
- select: props.selectedIds.includes(item[props.primaryKey])
79
- }), onClick: function (e) {
80
- e.preventDefault();
81
- props.onItemSelect(item[props.primaryKey]);
82
- }, onFocus: function () { return props.onItemHover(item[props.primaryKey]); }, onMouseOver: function () { return props.onItemHover(item[props.primaryKey]); } }, item.label)); }))))));
95
+ React.createElement("div", { className: bem.element('drop-down-list') }, props.items.map(function (item) { return renderItem(item); }))))));
83
96
  }
84
97
  exports["default"] = DropDownFieldView;
package/form/DropDownField/DropDownFieldView.scss CHANGED
@@ -7,6 +7,7 @@
7
7
  &_size_sm {
8
8
  font-size: 0.7875rem;
9
9
  }
10
+
10
11
  &_size_lg {
11
12
  font-size: 1.25rem;
12
13
  }
@@ -73,12 +74,14 @@
73
74
  opacity: .5;
74
75
  }
75
76
  }
77
+
76
78
  &_size_sm &__selected-items {
77
79
  padding: 0.25rem 0.5rem;
78
80
  line-height: 1.5;
79
81
  border-radius: 0.2rem;
80
82
  height: 31px;
81
83
  }
84
+
82
85
  &_size_lg &__selected-items {
83
86
  padding: 0.5rem 1rem;
84
87
  line-height: 1.5;
@@ -86,7 +89,7 @@
86
89
  height: 48px;
87
90
  }
88
91
 
89
- &__selected-item-multiple{
92
+ &__selected-item-multiple {
90
93
  cursor: default;
91
94
  margin-right: 5px;
92
95
  padding: 0 4px 0 8px;
@@ -96,21 +99,22 @@
96
99
  border-radius: 2px;
97
100
  background: #f5f5f5;
98
101
  }
99
- &__selected-item-multiple-remove{
102
+
103
+ &__selected-item-multiple-remove {
100
104
  cursor: pointer;
101
105
  margin-left: 6px;
102
106
 
103
107
  display: flex;
104
108
  align-items: center;
105
109
 
106
- svg{
110
+ svg {
107
111
  width: 10px;
108
112
  opacity: .5;
109
113
  transition: opacity .1s ease-in;
110
114
  }
111
115
 
112
- &:hover{
113
- svg{
116
+ &:hover {
117
+ svg {
114
118
  opacity: 1;
115
119
  }
116
120
  }
@@ -126,8 +130,7 @@
126
130
  cursor: pointer;
127
131
 
128
132
  &::before,
129
- &::after
130
- {
133
+ &::after {
131
134
  display: block;
132
135
  position: absolute;
133
136
  top: 50%;
@@ -176,6 +179,7 @@
176
179
  width: 100%;
177
180
  }
178
181
  }
182
+
179
183
  &_size_sm &__search {
180
184
  padding: 0.1rem 0.2rem;
181
185
  }
@@ -189,6 +193,14 @@
189
193
  background-color: transparent;
190
194
  border: unset;
191
195
 
196
+ &_group {
197
+ font-weight: bold;
198
+ }
199
+
200
+ &_level_1 {
201
+ padding-left: 1.25rem
202
+ }
203
+
192
204
  &_hover {
193
205
  background-color: $dropdown-divider-bg;
194
206
  }
@@ -198,12 +210,15 @@
198
210
  color: #152536;
199
211
  }
200
212
  }
213
+
201
214
  &_size_sm &__drop-down-item {
202
215
  padding: 0.25rem 0.5rem;
203
216
  }
217
+
204
218
  &_size_lg &__drop-down-item {
205
219
  padding: 0.5rem 1rem;
206
220
  }
221
+
207
222
  &__placeholder {
208
223
  color: #fff;
209
224
  }
package/form/FieldList/FieldListView.js CHANGED
@@ -25,17 +25,19 @@ var form_1 = require("@steroidsjs/core/ui/form");
25
25
  function FieldListView(props) {
26
26
  var bem = hooks_1.useBem('FieldListView');
27
27
  return (React.createElement("div", { className: bem(bem.block(), props.className), style: props.style, ref: props.forwardedRef },
28
- React.createElement("table", { className: bem(bem.element('table'), 'table', props.size && 'table-' + props.size) },
28
+ React.createElement("table", { className: bem(bem.element('table'), 'table', props.size && 'table-' + props.size, props.tableClassName) },
29
29
  React.createElement("thead", null,
30
30
  React.createElement("tr", null,
31
31
  props.items.map(function (field, rowIndex) { return (React.createElement("th", { key: rowIndex, className: bem(bem.element('table-cell-header'), field.headerClassName) }, field.label)); }),
32
32
  props.showRemove && (
33
33
  // eslint-disable-next-line jsx-a11y/control-has-associated-label
34
34
  React.createElement("th", null)))),
35
- React.createElement("tbody", null, props.children)),
36
- props.showAdd && !props.disabled && (React.createElement(form_1.Button, { formId: false, layout: false, color: 'secondary', className: bem.element('button-add'), onClick: function (e) {
37
- e.preventDefault();
38
- props.onAdd();
39
- } }, __('Добавить ещё')))));
35
+ React.createElement("tbody", null, props.children),
36
+ React.createElement("tfoot", null,
37
+ React.createElement("tr", null,
38
+ React.createElement("td", { colSpan: props.items.length }, props.showAdd && !props.disabled && (React.createElement(form_1.Button, { formId: false, layout: false, color: 'secondary', className: bem.element('button-add'), onClick: function (e) {
39
+ e.preventDefault();
40
+ props.onAdd();
41
+ } }, __('Добавить ещё')))))))));
40
42
  }
41
43
  exports["default"] = FieldListView;
package/form/NumberField/NumberFieldView.js CHANGED
@@ -36,16 +36,14 @@ var hooks_1 = require("@steroidsjs/core/hooks");
36
36
  function NumberFieldView(props) {
37
37
  // Input ref
38
38
  var inputRef = react_1.useRef(null);
39
- // Value state
40
- var _a = react_1.useState(null), value = _a[0], setValue = _a[1];
41
- var onStepUp = function () {
39
+ var onStepUp = react_1.useCallback(function () {
42
40
  inputRef.current.stepUp();
43
- setValue(inputRef.current.value);
44
- };
45
- var onStepDown = function () {
41
+ props.inputProps.onChange(inputRef.current.value);
42
+ }, [inputRef.current]);
43
+ var onStepDown = react_1.useCallback(function () {
46
44
  inputRef.current.stepDown();
47
- setValue(inputRef.current.value);
48
- };
45
+ props.inputProps.onChange(inputRef.current.value);
46
+ }, [inputRef.current]);
49
47
  var bem = hooks_1.useBem('NumberFieldView');
50
48
  return (React.createElement("div", { className: bem(bem.block({
51
49
  disabled: props.inputProps.disabled
@@ -55,13 +53,13 @@ function NumberFieldView(props) {
55
53
  }), !!props.errors && 'is-invalid') }, props.inputProps)),
56
54
  !props.disabled && !props.errors && (React.createElement("div", { className: bem.element('arrows-container') },
57
55
  React.createElement("button", { className: bem.element('arrow', {
58
- disabled: props.inputProps.max && value >= props.inputProps.max
59
- }), onClick: onStepUp },
56
+ disabled: props.inputProps.max && props.inputProps.value >= props.inputProps.max
57
+ }), type: 'button', onClick: onStepUp },
60
58
  React.createElement("svg", { viewBox: '64 64 896 896', width: '1em', height: '1em' },
61
59
  React.createElement("path", { d: 'M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140\n 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1\n 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z' }))),
62
60
  React.createElement("button", { className: bem.element('arrow', {
63
- disabled: props.inputProps.min && value <= props.inputProps.min
64
- }), onClick: onStepDown },
61
+ disabled: props.inputProps.min && props.inputProps.value <= props.inputProps.min
62
+ }), type: 'button', onClick: onStepDown },
65
63
  React.createElement("svg", { viewBox: '64 64 896 896', width: '1em', height: '1em' },
66
64
  React.createElement("path", { d: 'M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5\n 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39\n 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z' })))))));
67
65
  }
package/nav/Breadcrubms/BreadcrumbsView.d.ts CHANGED
@@ -1,4 +1,3 @@
1
1
  /// <reference types="react" />
2
- import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
3
2
  import { IBreadcrumbsViewProps } from '@steroidsjs/core/ui/nav/Breadcrumbs/Breadcrumbs';
4
- export default function BreadcrumbsView(props: IBreadcrumbsViewProps & IBemHocOutput): JSX.Element;
3
+ export default function BreadcrumbsView(props: IBreadcrumbsViewProps): JSX.Element;
package/nav/Breadcrubms/BreadcrumbsView.js CHANGED
@@ -32,7 +32,7 @@ function BreadcrumbsView(props) {
32
32
  React.createElement("ol", { className: bem.element('list') }, items.map(function (item, index) {
33
33
  var isLastItem = items.length === index + 1;
34
34
  return (React.createElement("li", { key: item.id || index, className: bem.element('item') },
35
- !isLastItem && item.id && (React.createElement(Link_1["default"], { toRoute: item.id, href: item.id }, item.title)),
35
+ !isLastItem && item.id && (React.createElement(Link_1["default"], { toRoute: item.id, toRouteParams: props.routeParams, href: item.id }, item.title)),
36
36
  (isLastItem || !item.id) && (React.createElement("span", null, props.pageTitle || item.title))));
37
37
  }))));
38
38
  }
package/nav/Breadcrubms/BreadcrumbsView.scss CHANGED
@@ -4,6 +4,7 @@
4
4
  &__list {
5
5
  display: flex;
6
6
  list-style: none;
7
+ padding: 0;
7
8
  }
8
9
 
9
10
  &__item {
package/nav/Nav/NavIconView.js CHANGED
@@ -39,7 +39,7 @@ var hooks_1 = require("@steroidsjs/core/hooks");
39
39
  function NavIconView(props) {
40
40
  var bem = hooks_1.useBem('NavIconView');
41
41
  return (React.createElement("div", { className: bem(bem.block(), props.className) },
42
- props.items.map(function (item, index) { return (React.createElement(Button_1["default"], __assign({ icon: props.icon ? props.icon : 'circle-notch', key: item.id || index, link: true, onClick: function () { return props.onClick(item, index); } }, item, { label: null, hint: item.hint || item.label || null }))); }),
42
+ props.items.map(function (item, index) { return (React.createElement(Button_1["default"], __assign({ icon: props.icon ? props.icon : 'circle-notch', key: item.id || index, link: true, onClick: function () { return props.onClick(item, index); }, layout: false }, item, { label: null, hint: item.hint || item.label || null }))); }),
43
43
  props.children));
44
44
  }
45
45
  exports["default"] = NavIconView;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@steroidsjs/bootstrap",
3
- "version": "2.1.1",
3
+ "version": "2.1.5",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -19,7 +19,7 @@
19
19
  "dependencies": {
20
20
  "@ckeditor/ckeditor5-react": "^3.0.2",
21
21
  "@steroidsjs/ckeditor5": "^27.0.2-rc.2",
22
- "@steroidsjs/core": "^2.1.1",
22
+ "@steroidsjs/core": "^2.2.11",
23
23
  "bootstrap": "^4.5.2",
24
24
  "lodash": "^4.17.20",
25
25
  "lodash-es": "^4.17.20",
package/scss/variables/colors.scss CHANGED
@@ -1,52 +1,52 @@
1
- $primary: #651FFF;
2
- $primary-dark: #410FAD;
3
- $primary-light: #D8CCF7;
1
+ $primary: #651FFF !default;
2
+ $primary-dark: darken($primary, 25) !default;
3
+ $primary-light: lighten($primary, 50) !default;
4
4
 
5
- $secondary: #97A7C8;
6
- $secondary-dark: #596886;
7
- $secondary-light: #E3EAF9;
5
+ $secondary: #97A7C8 !default;
6
+ $secondary-dark: darken($secondary, 25) !default;
7
+ $secondary-light: lighten($secondary, 50) !default;
8
8
 
9
- $heading: #152536;
10
- $body: #68717A;
11
- $white: #FFFFFF;
9
+ $success: #64D03E !default;
10
+ $success-dark: darken($success, 25) !default;
11
+ $success-light: lighten($success, 50) !default;
12
12
 
13
- $success: #64D03E;
14
- $success-dark: #218838;
15
- $success-light: #ABED94;
13
+ $danger: #FF4557 !default;
14
+ $danger-dark: darken($danger, 25) !default;
15
+ $danger-light: lighten($danger, 50) !default;
16
16
 
17
- $danger: #FF4557;
18
- $danger-dark: #DA2839;
19
- $danger-light: #ff99a3;
17
+ $warning: #fad826 !default;
18
+ $warning-dark: darken($warning, 25) !default;
19
+ $warning-light: lighten($warning, 50) !default;
20
20
 
21
- $warning: #fad826;
22
- $warning-dark: #dcc131;
23
- $warning-light: #fff3b2;
21
+ $info: #39bbd8 !default;
22
+ $info-dark: darken($info, 25) !default;
23
+ $info-light: lighten($info, 50) !default;
24
24
 
25
- $info: #39bbd8;
26
- $info-dark: #2796af;
27
- $info-light: #a7efff;
25
+ $light: #f8f9fa !default;
26
+ $light-dark: darken($light, 25) !default;
27
+ $light-light: lighten($light, 50) !default;
28
28
 
29
- $light: #f8f9fa;
30
- $light-dark: #e2e6ea;
31
- $light-light: #fafafa;
29
+ $dark: #343a40 !default;
30
+ $dark-dark: darken($dark, 25) !default;
31
+ $dark-light: lighten($dark, 50) !default;
32
32
 
33
- $dark: #343a40;
34
- $dark-dark: #1a1c1e;
35
- $dark-light: #acacac;
33
+ $heading: #152536 !default;
34
+ $body: #68717A !default;
35
+ $white: #FFFFFF !default;
36
36
 
37
37
  $color-themes: () !default;
38
38
  $color-themes: map-merge(
39
- (
40
- "primary": ("color": $primary, "color-dark": $primary-dark, "color-light": $primary-light, "text-color": $white),
41
- "secondary": ("color": $secondary, "color-dark": $secondary-dark, "color-light": $secondary-light, "text-color": $white),
42
- "success": ("color": $success, "color-dark": $success-dark, "color-light": $success-light, "text-color": $white),
43
- "danger": ("color": $danger, "color-dark": $danger-dark, "color-light": $danger-light, "text-color": $white),
44
- "warning": ("color": $warning, "color-dark": $warning-dark, "color-light": $warning-light, "text-color": $dark),
45
- "info": ("color": $info, "color-dark": $info-dark, "color-light": $info-light, "text-color": $white),
46
- "light": ("color": $light, "color-dark": $light-dark, "color-light": $light-light, "text-color": $dark),
47
- "dark": ("color": $dark, "color-dark": $dark-dark, "color-light": $dark-light, "text-color": $white)
48
- ),
49
- $color-themes
39
+ (
40
+ "primary": ("color": $primary, "color-dark": $primary-dark, "color-light": $primary-light, "text-color": $white),
41
+ "secondary": ("color": $secondary, "color-dark": $secondary-dark, "color-light": $secondary-light, "text-color": $white),
42
+ "success": ("color": $success, "color-dark": $success-dark, "color-light": $success-light, "text-color": $white),
43
+ "danger": ("color": $danger, "color-dark": $danger-dark, "color-light": $danger-light, "text-color": $white),
44
+ "warning": ("color": $warning, "color-dark": $warning-dark, "color-light": $warning-light, "text-color": $dark),
45
+ "info": ("color": $info, "color-dark": $info-dark, "color-light": $info-light, "text-color": $white),
46
+ "light": ("color": $light, "color-dark": $light-dark, "color-light": $light-light, "text-color": $dark),
47
+ "dark": ("color": $dark, "color-dark": $dark-dark, "color-light": $dark-light, "text-color": $white)
48
+ ),
49
+ $color-themes
50
50
  );
51
51
 
52
52
  $grey-light: #D9D9D9;