@progress/kendo-theme-default 5.2.1-dev.2 → 5.2.1-dev.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.
@@ -0,0 +1,262 @@
1
+ {
2
+ "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.14.0/lib/schemas/kendo-swatch.json",
3
+ "name": "Default Ocean Blue",
4
+ "product": "kendo",
5
+ "base": "@progress/kendo-theme-default",
6
+ "version": "5.2.1-dev.5",
7
+ "previewColors": [
8
+ "#ffffff",
9
+ "#f5f5f5",
10
+ "#1274AC",
11
+ "#0f6190",
12
+ "#424242"
13
+ ],
14
+ "components": [],
15
+ "groups": [
16
+ {
17
+ "name": "Theme colors",
18
+ "variables": {
19
+ "primary": {
20
+ "name": "Primary",
21
+ "type": "color",
22
+ "value": "#1274AC"
23
+ },
24
+ "secondary": {
25
+ "name": "Secondary",
26
+ "type": "color",
27
+ "value": "#757575"
28
+ },
29
+ "tertiary": {
30
+ "name": "Tertiary",
31
+ "type": "color",
32
+ "value": "#226581"
33
+ },
34
+ "info": {
35
+ "name": "Info",
36
+ "type": "color",
37
+ "value": "#0058E9"
38
+ },
39
+ "success": {
40
+ "name": "Success",
41
+ "type": "color",
42
+ "value": "#33a600"
43
+ },
44
+ "warning": {
45
+ "name": "Warning",
46
+ "type": "color",
47
+ "value": "#F5A600"
48
+ },
49
+ "error": {
50
+ "name": "Error",
51
+ "type": "color",
52
+ "value": "#D51923"
53
+ },
54
+ "light": {
55
+ "name": "Light",
56
+ "type": "color",
57
+ "value": "#757575"
58
+ }
59
+ }
60
+ },
61
+ {
62
+ "name": "Body",
63
+ "variables": {
64
+ "body-text": {
65
+ "name": "Body text color",
66
+ "type": "color",
67
+ "value": "#424242"
68
+ },
69
+ "body-bg": {
70
+ "name": "Body background",
71
+ "type": "color",
72
+ "value": "#ffffff"
73
+ },
74
+ "heading-text": {
75
+ "name": "Headings text color",
76
+ "type": "color",
77
+ "value": "#272727"
78
+ },
79
+ "subtle-text": {
80
+ "name": "Subtle text color",
81
+ "type": "color",
82
+ "value": "#666666"
83
+ },
84
+ "disabled-text": {
85
+ "name": "Disabled text color",
86
+ "type": "color",
87
+ "value": "#8f8f8f"
88
+ }
89
+ }
90
+ },
91
+ {
92
+ "name": "Components",
93
+ "variables": {
94
+ "component-text": {
95
+ "name": "Component text color",
96
+ "type": "color",
97
+ "value": "#424242"
98
+ },
99
+ "component-bg": {
100
+ "name": "Component background",
101
+ "type": "color",
102
+ "value": "#ffffff"
103
+ },
104
+ "base-text": {
105
+ "name": "Header text color",
106
+ "type": "color",
107
+ "value": "#424242"
108
+ },
109
+ "base-bg": {
110
+ "name": "Header background",
111
+ "type": "color",
112
+ "value": "#fafafa"
113
+ },
114
+ "hovered-text": {
115
+ "name": "Hover text color",
116
+ "type": "color",
117
+ "value": "#424242"
118
+ },
119
+ "hovered-bg": {
120
+ "name": "Hover background",
121
+ "type": "color",
122
+ "value": "#ececec"
123
+ },
124
+ "selected-text": {
125
+ "name": "Selected text color",
126
+ "type": "color",
127
+ "value": "#ffffff"
128
+ },
129
+ "selected-bg": {
130
+ "name": "Selected background",
131
+ "type": "color",
132
+ "value": "#1274AC"
133
+ }
134
+ }
135
+ },
136
+ {
137
+ "name": "Button",
138
+ "variables": {
139
+ "kendo-button-text": {
140
+ "name": "Button text color",
141
+ "type": "color",
142
+ "value": "#424242"
143
+ },
144
+ "kendo-button-bg": {
145
+ "name": "Button background",
146
+ "type": "color",
147
+ "value": "#f5f5f5"
148
+ },
149
+ "kendo-flat-button-hover-opacity": {
150
+ "name": "Flat Button hover opacity",
151
+ "type": "number",
152
+ "value": "4%"
153
+ },
154
+ "kendo-flat-button-active-opacity": {
155
+ "name": "Flat Button active opacity",
156
+ "type": "number",
157
+ "value": "6%"
158
+ },
159
+ "kendo-flat-button-selected-opacity": {
160
+ "name": "Flat Button selected opacity",
161
+ "type": "number",
162
+ "value": "8%"
163
+ }
164
+ }
165
+ },
166
+ {
167
+ "name": "Link",
168
+ "variables": {
169
+ "link-text": {
170
+ "name": "Link text color",
171
+ "type": "color",
172
+ "value": "#1274AC"
173
+ },
174
+ "link-hover-text": {
175
+ "name": "Link hover text color",
176
+ "type": "color",
177
+ "value": "#0f6190"
178
+ }
179
+ }
180
+ },
181
+ {
182
+ "name": "Dataviz",
183
+ "variables": {
184
+ "series-a": {
185
+ "name": "Series A",
186
+ "type": "color",
187
+ "value": "#1274AC"
188
+ },
189
+ "series-b": {
190
+ "name": "Series B",
191
+ "type": "color",
192
+ "value": "#ffd246"
193
+ },
194
+ "series-c": {
195
+ "name": "Series C",
196
+ "type": "color",
197
+ "value": "#78d237"
198
+ },
199
+ "series-d": {
200
+ "name": "Series D",
201
+ "type": "color",
202
+ "value": "#28b4c8"
203
+ },
204
+ "series-e": {
205
+ "name": "Series E",
206
+ "type": "color",
207
+ "value": "#2d73f5"
208
+ },
209
+ "series-f": {
210
+ "name": "Series F",
211
+ "type": "color",
212
+ "value": "#aa46be"
213
+ }
214
+ }
215
+ },
216
+ {
217
+ "name": "Scheduler",
218
+ "variables": {
219
+ "scheduler-event-bg": {
220
+ "name": "Scheduler event background",
221
+ "type": "color",
222
+ "value": "#1274AC"
223
+ },
224
+ "scheduler-event-selected-bg": {
225
+ "name": "Scheduler event selected background",
226
+ "type": "color",
227
+ "value": "#0f6190"
228
+ }
229
+ }
230
+ },
231
+ {
232
+ "name": "Pager",
233
+ "variables": {
234
+ "pager-number-text": {
235
+ "name": "Pager number text color",
236
+ "type": "color",
237
+ "value": "#424242"
238
+ },
239
+ "pager-number-hover-bg": {
240
+ "name": "Pager number hover background",
241
+ "type": "color",
242
+ "value": "#ececec"
243
+ },
244
+ "pager-number-hover-text": {
245
+ "name": "Pager number hover text color",
246
+ "type": "color",
247
+ "value": "#424242"
248
+ },
249
+ "pager-number-selected-bg": {
250
+ "name": "Pager number selected background",
251
+ "type": "color",
252
+ "value": "#1274AC"
253
+ },
254
+ "pager-number-selected-text": {
255
+ "name": "Pager number selected text color",
256
+ "type": "color",
257
+ "value": "#ffffff"
258
+ }
259
+ }
260
+ }
261
+ ]
262
+ }
@@ -3,7 +3,7 @@
3
3
  "name": "Default Orange",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "5.2.1-dev.2",
6
+ "version": "5.2.1-dev.5",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#f5f5f5",
@@ -3,7 +3,7 @@
3
3
  "name": "Default Purple",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "5.2.1-dev.2",
6
+ "version": "5.2.1-dev.5",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#f5f5f5",
@@ -3,7 +3,7 @@
3
3
  "name": "Default Turquoise",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "5.2.1-dev.2",
6
+ "version": "5.2.1-dev.5",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#f5f5f5",
@@ -3,7 +3,7 @@
3
3
  "name": "Default Urban",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "5.2.1-dev.2",
6
+ "version": "5.2.1-dev.5",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#e3eef4",
@@ -3,6 +3,7 @@ module.exports.mainDark = require('./default-main-dark.json');
3
3
  module.exports.blue = require('./default-blue.json');
4
4
  module.exports.green = require('./default-green.json');
5
5
  module.exports.nordic = require('./default-nordic.json');
6
+ module.exports.orange = require('./default-ocean-blue.json');
6
7
  module.exports.orange = require('./default-orange.json');
7
8
  module.exports.purple = require('./default-purple.json');
8
9
  module.exports.turquoise = require('./default-turquoise.json');
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-theme-default",
3
3
  "description": "SASS resources for the default Kendo UI theme",
4
- "version": "5.2.1-dev.2",
4
+ "version": "5.2.1-dev.5",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
@@ -47,5 +47,5 @@
47
47
  "prepublishOnly": "node ../../scripts/themes-prepublish.js",
48
48
  "postpublish": "echo 'no postpublish for default theme'"
49
49
  },
50
- "gitHead": "e446301962e9eba01d9e3c1920b77c5349ce68cf"
50
+ "gitHead": "7f442a4c1dfe243eff6b623b62e73c161254f653"
51
51
  }
@@ -89,7 +89,6 @@
89
89
  }
90
90
  .k-actionsheet-item-description {
91
91
  font-size: $actionsheet-item-description-font-size;
92
- opacity: $actionsheet-item-description-opacity;
93
92
  }
94
93
 
95
94
 
@@ -31,6 +31,12 @@
31
31
  .k-actionsheet-item {}
32
32
 
33
33
 
34
+ // Actionsheet item description
35
+ .k-actionsheet-item-description {
36
+ @include fill( $color: $actionsheet-item-description-text );
37
+ }
38
+
39
+
34
40
  // Actionsheet action
35
41
  .k-actionsheet-action {
36
42
 
@@ -44,8 +44,9 @@ $actionsheet-item-icon-size: null !default;
44
44
 
45
45
  $actionsheet-item-title-font-weight: null !default;
46
46
  $actionsheet-item-title-text-transform: null !default;
47
+
47
48
  $actionsheet-item-description-font-size: .875em !default;
48
- $actionsheet-item-description-opacity: .75 !default;
49
+ $actionsheet-item-description-text: $subtle-text !default;
49
50
 
50
51
  $actionsheet-item-hover-bg: $hovered-bg !default;
51
52
  $actionsheet-item-hover-text: null !default;
@@ -60,7 +60,7 @@ $kendo-chip-sizes: (
60
60
 
61
61
  /// The base background of the chip.
62
62
  /// @group chip
63
- $kendo-chip-base-bg: if( $dark-theme, contrast-wcag($kendo-button-text), $kendo-button-text ) !default;
63
+ $kendo-chip-base-bg: $kendo-button-text !default;
64
64
 
65
65
  /// Theme colors map for the chip.
66
66
  /// @group chip
@@ -45,7 +45,7 @@ $colorgradient-canvas-draghandle-margin-x: -( $colorgradient-draghandle-width /
45
45
  $colorgradient-input-width: 46px !default;
46
46
  $colorgradient-input-gap: ( $colorgradient-spacer / 1.5 ) !default;
47
47
  $colorgradient-input-label-gap: ( $colorgradient-spacer / 3 ) !default;
48
- $colorgradient-input-label-text: $disabled-text !default;
48
+ $colorgradient-input-label-text: $subtle-text !default;
49
49
 
50
50
  $colorgradient-contrast-ratio-font-weight: $font-weight-bold !default;
51
51
  $colorgradient-contrast-spacer: ( $colorgradient-spacer / 1.5 ) !default;
@@ -1,210 +1,14 @@
1
1
  @include exports("dropdowngrid/layout") {
2
2
 
3
- // Dropdown grid
3
+ // DropdownGrid
4
4
  .k-dropdown-grid {}
5
5
 
6
+ // DropdowGrid Popup
6
7
  .k-dropdowngrid-popup {
7
8
  overflow: hidden;
8
9
  }
9
- .k-dropdowngrid-popup .k-virtual-wrap {
10
- margin: 0;
11
- }
12
-
13
- .k-dropdowngrid-popup .k-list-scroller {
14
- overflow-x: hidden;
15
- }
16
-
17
- // Grid list
18
- .k-grid-list {
19
- margin: 0;
20
- padding: 0;
21
- width: 100%;
22
- max-width: none;
23
- border-width: 0;
24
- border-collapse: collapse;
25
- border-spacing: 0;
26
- table-layout: fixed;
27
- empty-cells: show;
28
- outline: none;
29
- display: table;
30
- list-style: none;
31
- }
32
-
33
-
34
- // Header
35
- .k-dropdowngrid-popup .k-grid-header {
36
- border-width: 0 0 1px;
37
- border-style: solid;
38
- border-color: inherit;
39
- font-size: $grid-header-font-size;
40
- display: block;
41
- }
42
- .k-dropdowngrid-popup .k-grid-header-wrap {
43
- border-width: 0 $grid-cell-vertical-border-width 0 0;
44
- border-style: solid;
45
- border-color: inherit;
46
- vertical-align: top;
47
- display: inline-block;
48
- overflow: hidden;
49
- }
50
- .k-dropdowngrid-popup .k-grid-header table {
51
- margin-bottom: -1px;
52
- width: 100%;
53
- max-width: none;
10
+ .k-dropdowngrid-popup > .k-data-table {
54
11
  border-width: 0;
55
- border-collapse: collapse;
56
- border-spacing: 0;
57
- table-layout: fixed;
58
- empty-cells: show;
59
- outline: none;
60
- }
61
- .k-dropdowngrid-popup .k-grid-header .k-header {
62
- padding: $grid-header-padding-y $grid-header-padding-x;
63
- border-width: 0 0 0 $grid-cell-vertical-border-width;
64
- border-style: solid;
65
- font-weight: normal;
66
- text-align: left;
67
- white-space: nowrap;
68
- text-overflow: ellipsis;
69
- overflow: hidden;
70
-
71
- &:first-child {
72
- border-left: 0;
73
- }
74
- }
75
-
76
-
77
- // Rows
78
- .k-grid-list > .k-item {
79
- box-sizing: border-box;
80
- display: table-row;
81
- position: relative;
82
- cursor: pointer;
83
- }
84
- .k-grid-list > .k-item > .k-cell,
85
- .k-grid-list > .k-item > .k-group,
86
- .k-grid-list > .k-item > .k-spacer-group {
87
- box-sizing: border-box;
88
- display: table-cell;
89
- vertical-align: middle;
90
- }
91
- .k-grid-list.k-virtual-list > .k-item > .k-cell,
92
- .k-grid-list.k-virtual-list > .k-item > .k-group,
93
- .k-grid-list.k-virtual-list > .k-item > .k-spacer-group {
94
- display: inline-block;
95
- }
96
- .k-grid-list > .k-item:last-child > .k-cell,
97
- .k-grid-list > .k-item:last-child > .k-group-cell,
98
- .k-grid-list > .k-item:last-child > .k-spacer-cell {
99
- border-bottom-width: 0;
100
- }
101
-
102
-
103
- // Cells
104
- .k-grid-list > .k-item > .k-cell {
105
- padding: $grid-cell-padding-y $grid-cell-padding-x;
106
- border-width: 0 0 $grid-cell-horizontal-border-width $grid-cell-vertical-border-width;
107
- border-style: solid;
108
- text-align: left;
109
- white-space: nowrap;
110
- text-overflow: ellipsis;
111
- overflow: hidden;
112
-
113
- &:first-child {
114
- border-left: 0;
115
- }
116
- }
117
-
118
-
119
- // Grouping
120
- .k-dropdowngrid-popup .k-group-header,
121
- .k-dropdowngrid-popup .k-outer-group-header {
122
- margin: 0;
123
- padding: $grid-header-padding-y $grid-header-padding-x;
124
- min-height: auto;
125
- font-size: inherit;
126
- text-align: left;
127
- font-weight: bold;
128
- }
129
- .k-grid-list > .k-item.k-first {
130
- border-top: 1px solid currentColor;
131
- }
132
- .k-grid-list > .k-item > .k-group-cell,
133
- .k-grid-list > .k-item > .k-spacer-cell {
134
- padding: 0;
135
- width: 0;
136
- border-left-width: 0;
137
- border-right-width: 0;
138
- overflow: visible;
139
- position: relative;
140
- }
141
- .k-grid-list > .k-item > .k-group-cell > span {
142
- padding: 0 ($grid-cell-padding-x / 2);
143
- font-size: .75em;
144
- position: absolute;
145
- top: 0;
146
- right: 0;
147
- }
148
- .k-grid-list > .k-outer-group-header {
149
- height: calc( #{$grid-header-padding-y * 2} + (#{$font-size} * #{$line-height}) );
150
- display: table-row;
151
- position: relative;
152
- }
153
- .k-grid-list > .k-outer-group-header > strong {
154
- padding: $grid-header-padding-y $grid-header-padding-x;
155
- width: 100%;
156
- box-sizing: border-box;
157
- position: absolute;
158
- left: 0;
159
- }
160
-
161
-
162
- // Footer
163
- .k-dropdowngrid-popup .k-footer {
164
- padding: $grid-footer-padding-y $grid-footer-padding-x;
165
- border-width: 1px 0 0;
166
- border-style: solid;
167
- text-align: left;
168
- white-space: nowrap;
169
- text-overflow: ellipsis;
170
- overflow: hidden;
171
- position: relative;
172
- flex-shrink: 0;
173
- }
174
-
175
-
176
- // RTL
177
- .k-rtl,
178
- [dir="rtl"] {
179
- &.k-dropdowngrid-popup .k-grid-header-wrap,
180
- .k-dropdowngrid-popup .k-grid-header-wrap {
181
- border-right-width: 0;
182
- border-left-width: $grid-cell-vertical-border-width;
183
- }
184
- &.k-dropdowngrid-popup .k-grid-header .k-header,
185
- .k-dropdowngrid-popup .k-grid-header .k-header,
186
- .k-grid-list > .k-item > .k-cell {
187
- border-left-width: 0;
188
- border-right-width: $grid-cell-vertical-border-width;
189
- text-align: right;
190
- }
191
- &.k-dropdowngrid-popup .k-grid-header .k-header:first-child,
192
- .k-dropdowngrid-popup .k-grid-header .k-header:first-child,
193
- .k-grid-list > .k-item > .k-cell:first-child {
194
- border-right-width: 0;
195
- }
196
- div.k-dropdowngrid-popup .k-group-header,
197
- div.k-dropdowngrid-popup .k-outer-group-header {
198
- text-align: right;
199
- }
200
- .k-grid-list > .k-item > .k-group-cell > span {
201
- right: auto;
202
- left: 0;
203
- }
204
- .k-grid-list > .k-outer-group-header > strong {
205
- left: auto;
206
- right: 0;
207
- }
208
12
  }
209
13
 
210
14
  }
@@ -3,89 +3,4 @@
3
3
  // Dropdown grid
4
4
  .k-dropdown-grid {}
5
5
 
6
- // Dropdowngrid
7
- .k-dropdowngrid-popup {
8
- border-color: $grid-border;
9
- color: $grid-text;
10
- background-color: $grid-bg;
11
- }
12
-
13
-
14
- // Header
15
- .k-dropdowngrid-popup .k-header,
16
- .k-dropdowngrid-popup .k-grid-header {
17
- border-color: $grid-header-border;
18
- color: $grid-header-text;
19
- background-color: $grid-header-bg;
20
- }
21
-
22
-
23
- // Footer
24
- .k-dropdowngrid-popup .k-footer {
25
- border-color: $grid-header-border;
26
- color: $grid-header-text;
27
- background-color: $grid-header-bg;
28
- }
29
-
30
-
31
- // Group header
32
- .k-dropdowngrid-popup .k-group-header,
33
- .k-dropdowngrid-popup .k-outer-group-header {
34
- border-color: $grid-header-border;
35
- color: $grid-header-text;
36
- background-color: $grid-header-bg;
37
- }
38
- .k-grid-list > .k-group-header,
39
- .k-grid-list > .k-outer-group-header {
40
- background: none;
41
- box-shadow: none;
42
- }
43
-
44
-
45
- // Alt
46
- .k-grid-list > .k-item:nth-child(2n) {
47
- background-color: $grid-alt-bg;
48
- }
49
- .k-grid-list > .k-outer-group-header:nth-child(2n) {
50
-
51
- > strong {
52
- background-color: $grid-alt-bg;
53
- }
54
- }
55
-
56
-
57
- // Cells
58
- .k-dropdowngrid-popup .k-cell {
59
- border-color: $grid-border;
60
- }
61
-
62
-
63
- // Interactive states
64
- .k-dropdowngrid-popup .k-item.k-state-hover,
65
- .k-dropdowngrid-popup .k-item:hover {
66
- border-color: $grid-hovered-border;
67
- color: $grid-hovered-text;
68
- background-color: $grid-hovered-bg;
69
- }
70
- .k-dropdowngrid-popup .k-item.k-state-selected {
71
- border-color: $grid-selected-border;
72
- color: $grid-selected-text;
73
- background-color: $grid-selected-bg;
74
- }
75
- .k-dropdowngrid-popup .k-item.k-state-focused {
76
- box-shadow: $grid-focused-shadow;
77
- }
78
-
79
-
80
- // Grouping
81
- .k-dropdowngrid-popup .k-group-cell span {
82
- background-color: $grid-text;
83
- color: $grid-bg;
84
- }
85
- .k-grid-list > .k-item.k-last > .k-cell,
86
- .k-grid-list > .k-item.k-last > .k-group-cell,
87
- .k-grid-list > .k-item.k-last > .k-spacer-cell {
88
- border-bottom-color: $grid-text;
89
- }
90
-
91
6
  }
@@ -23,4 +23,4 @@ $dropzone-hint-text: null !default;
23
23
 
24
24
  $dropzone-note-font-size: $font-size-sm !default;
25
25
  $dropzone-note-spacing: null !default;
26
- $dropzone-note-text: try-tint( $dropzone-text, 4 ) !default;
26
+ $dropzone-note-text: $subtle-text !default;